Taizoo's Tech note

技術系の備忘録

Android アプリにGoogleマップを表示する

AndroidアプリにGoogleマップを表示させたいと思います。
今回は手っ取り早くマップを表示させるために、Google Maps Activityを使用した方法を紹介します。
このような感じでアプリを起動するとマップとアイコンが表示されるところまでを作って行きます。

f:id:Taizoo:20220115161116p:plain

 

目次

環境と条件

Android Studio Arctic Fox | 2020.3.1 Patch 4

・動作端末:Pixel 4a - Android12

・事前にGoogleCloudConsoleでクレジットカードを登録していること

 

Google Maps Activityを使用した新規プロジェクトを作成

まずは、マップを表示するための新規のプロジェクトを作っていきます。
この際、プロジェクトのテンプレートで、"Google Maps Activity"を使用すると、最初からマップを表示するためのデフォルト実装がされているのでとても便利です。

 

1. Android StudioのNew Projectに"Google Maps Activity"を選択して、"Next"をクリックします。f:id:Taizoo:20220116075744p:plain

2. プロジェクトやパッケージの名称や開発言語を選択して、"Finish"をクリックします。
f:id:Taizoo:20220116080504p:plain

プロジェクトの生成が完了すると、google_maps_api.xmlが自動で作成されます。
この"YOUR_KEY_HERE"にこの後取得するGoogleMapsAPIキーを入力することになります。

f:id:Taizoo:20220116081835p:plain

GoogleMapsAPIキーの取得

続いて、APIキーを取得します。
※事前にGoogleCloudConsoleで、クレジットカード登録が済んでいる前提です。
クレジット登録しない状態で、APIキーの取得およびアプリへのキー設定をしてもマップは表示されませんでした。

3. 下記のページからGoogleCloudConsoleにログインします。

cloud.google.com


4. プロジェクトを登録します。

プロジェクト選択から"新しいプロジェクト"をクリックします。
プロジェクト名と場所を選択し、"作成"をクリックします。

f:id:Taizoo:20220116091744p:plain

5. "Maps SDK for Android"を有効化します。

 ①GoogleCloudConsoleにて、"APIとサービス"→"ライブラリ"を選択
 ②"Maps SDK for Android"を選択
 ③"有効化"をクリック

f:id:Taizoo:20220116094003p:plain


6. APIキーを作成します。
"認証情報"をクリックし、"+認証情報を作成"→"APIキー"の順にクリックします。

f:id:Taizoo:20220116095608p:plain

APIキーの作成が完了すると、下記のような画面が表示されるので、"キーを制限"をクリックします。

f:id:Taizoo:20220116100502p:plain

7. APIキーの制限
APIキーがバレた場合などに、無制限にアクセスされるのを防ぐために、キーの制限を追加します。

"Androidアプリ"にチェックを入れ、パッケージ名とフィンガープリントを入力

APIの制限で"キーを制限"にチェックを入れ、"Maps SDK for Android"をチェック

"保存"をクリック

これで、自分でビルドしたアプリからのみMaps SDK for Androidの機能にアクセスできるようになります。
なお、フィンガープリントは、上述のgoogle_maps_api.xmlに記載されています。
※モザイクを掛けている部分

f:id:Taizoo:20220116103558p:plain

GoogleMapsAPIキーを設定

8.アプリにAPIキーを設定する
設定はとても簡単で、google_maps_api.xmlの"YOUR_KEY_HERE"のところに、取得したAPIキーを記載します。

<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">YOUR_KEY_HERE</string>

 

以上で完了です。
アプリを起動すると、このようにマップとアイコンが表示されます。

f:id:Taizoo:20220115161116p:plain

まとめ

今回は、新規アプリでGoogleMapを表示する方法を紹介しました。
①GoogleMapsActivityのプロジェクトを作成
APIキーを取得
APIキーを設定
という3ステップでGoogleMapを表示することができました。

Google Cloud Consoleでの設定が所見ではわかりにくいかもしれません。
もう少し詳しく知りたい方は、公式のガイドを見てみると良いと思います。

developers.google.com