GoogleMap を表示するアプリを 0から作ってみよう！


# 前書き


この記事は GoogleMap を表示するアプリ( [東京公共交通オープンデータチャレンジ - サンプルアプリ -](https://play.google.com/store/apps/details?id=com.tokyo_kokyo_kotsu_open_data_challenge_sample_app) )
をリリースするまでの過程の中、最初 GoogleMap を表示するところについて記述したものです。
GoogleMap を表示させたいけどどうすればいいか悩んでる方、初めてアプリを作ってみたい方も簡単なのでぜひ参考にしてみてください。

# 事前準備
- [AndroidStudio](https://developer.android.com/studio/?gclid=Cj0KCQjwyoHlBRCNARIsAFjKJ6DTdAdFOi-j87JRz69AyV6f4vqq9n0S5Syg1_KBUO6pJz6az8c-RYEaAopWEALw_wcB) のインストール
- アプリ表示のための Android 端末とそのケーブル


# プロジェクトを作る

まず AndroidStudio から GoogleMap 用のプロジェクトを生成してみましょう。
順番は以下の通りです。

1. `Start a new Android Studio project` を選択
2. `Google Maps Activity`を選択し Next
3. それぞれ Project 名、Package 名、プロジェクトの保存される（ファイルの）位置を決めて Finish を押す

<img width="600" alt="スクリーンショット 2019-03-31 22.02.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/75978/e5ffbc17-fb2e-e189-c60d-ebe7090ef51a.png">
<img width="600" alt="スクリーンショット 2019-03-31 22.03.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/75978/6d124459-8da4-38a8-f82a-d6b98a0a205c.png">
<img width="600" alt="スクリーンショット 2019-03-31 22.04.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/75978/b67b5719-565a-5402-5edd-9178bc7bba5c.png">

# GoogleMap（Google API）を使うための設定を行う

プロジェクトを作ったので、GoogleMap を使うための肝である GoogleAPI の設定（キーとか）の設定をします。
これをやらないと GoogleMap がアプリに表示されません！

設定を行うには先作られたプロジェクトの画面から、URL をコピペします
スクショで例えると 7行目の `https://` で始まる URL になります。
<img width="600" alt="スクリーンショット 2019-03-31 22.05.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/75978/54b97cda-71e6-1352-9d46-30932f2ff20b.png">
その URL から以下のような画面に繋がるので、ここで今回使うプロジェクトの作成をします。
（Google アカウントのログインが必要になります）
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/75978/5af5c0a1-977c-d5ba-50ee-71f5548b6ca2.png">
プロジェクトを作成を選択し、「続行」を押すと少しの時間がかかり、以下のような API が有効になったという画面になります。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/75978/cfa2efe3-fd45-3b44-5037-1602151a2a2a.png">
そのまま「APIキーを作成する」を押し、作成された「自分の API キー」をコピーしておきましょう。（後からでも確認できます）
ここでコピーした APIキーが AndroidStudio で作ったプロジェクト（アプリ）で使われます。
<img width="600" alt="スクリーンショット 2019-03-31 22.55.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/75978/5ae5d44b-7aee-96f4-6b2e-f33e444bf495.png">

作られた API キーの中を一応確認してみましょう。`SHA-1 証明書のフィンガープリント` のところにすでに値が入っていることがわかります。
これは先ほどプロジェクトに書かれてあった `https://` リンクで入ったことにより、そのプロジェクト用の設定を自動でしてくれた感じになります。（特にいじらなくてもそのまま使える状態）
<img width="600" alt="スクリーンショット 2019-03-31 23.01.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/75978/0cb1751d-3f81-02e2-8c47-1ff5824b8fc1.png">

# プロジェクトにキーの登録しよう
それでは Google API で登録して作ったキーを実際のプロジェクトに貼ります。
貼る場所は先ほどでも使った `https://` リンクがあった `google_maps_api.xml` です。
スクショで例えると 23行目の `YOUR_KEY_HERE` と書かれているところに貼ります。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/75978/691247cc-3d0d-186b-e2b9-6535d3fb75bf.png">
貼ると以下のような感じ。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/75978/433d6891-1f6d-386d-bbaf-a9fcb94be780.png">

# 実際の端末で確認してみよう
AndroidStudio の右上ら辺にある緑の三角ボタンを押して繋いである携帯を選択します。
もし携帯（Devices）が表示されない場合は、携帯の`設定 → 開発者向けオプション → USBデバッグをON` にしてもう一回ケーブルに繋ぐと「USBデバッグを許可しますか？」のようなメッセージが携帯に出るので OK を押すと携帯を認識するようになり、Devices にも表示されます。
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/75978/383f9508-97f8-17a1-5347-0bac4a7ced20.png">
<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/75978/9f8e7f7c-2808-e95e-6f7c-52b816ccb344.png">
OKを押すと終わりです！！

# 表示された画面

<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/75978/e6ab5598-a11a-1452-9fb5-c8a971545b22.png">

おお、ちゃんと GoogleMap 表示されてる〜

# 後書き
とりあえず GoogleMap を表示させたいがため作成してみましたが、今のままじゃやっぱり使えないですよねー
でもこれは [東京公共交通オープンデータチャレンジ - サンプルアプリ -](https://play.google.com/store/apps/details?id=com.tokyo_kokyo_kotsu_open_data_challenge_sample_app) を作るための第一歩だったのでこれからもっとそれっぽいアプリにして行きます。
表示するデータ（API）の使い方や、リリースした後の問題点など、どんどん記事書きますが
もう出来上がっているリポジトリは[こちら](https://github.com/leebon93/tokyo_kokyo_kotsu_open_data_challenge_sample_app)になりますので参考にしてみてください。