Google Map APIを利用してMapを表示する方法(Android)

# 概要
自作Androidアプリの開発で、使用する機会があったのでメモしておく。
アプリの一部にGoogleMapを組み込みたい時に利用できる。

#事前準備
Googleアカウントでログインしていること
★[Googleアカウント作成方法](https://support.google.com/accounts/answer/27441?hl=ja)

#Google Play servicesのインストール
AndroidStudio > Tool > SDK ManagerからGoogle Play servicesをインストールしておく
<img width="1124" alt="スクリーンショット 2019-04-28 21.53.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/cb028adc-69a7-763f-63f0-62221708e85b.png">

#Google Play servicesをプロジェクトに紐付ける
・build.gradle にGoogle Play servicesをimplementationする

```ruby:build.gradle
dependencies {
    ...
    implementation 'com.google.android.gms:play-services:+'
}
```


#AndroidManifestにmeta-data追加する
`</activity>`の後から`</application>`の間に下記を追加する

```ruby:AndroidManifest.xml
<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />
```

#Google Map APIのKeyを取得
#Keyの生成
1.[API ライブラリ](https://console.developers.google.com/apis/library?project=golfscoremanagement)からMaps SDK for Android を有効にする
<img width="939" alt="スクリーンショット 2019-04-28 22.19.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/9b0396e8-f291-5f86-3a91-507624b587cf.png">

2.[ダッシュボード](https://console.developers.google.com/projectselector2/apis/dashboard?folder=&organizationId=0&supportedpurview=project&project=)からプロジェクトを作成する
プロジェクト名：任意の名前
場所：自作アプリであれば"組織なし"でOK
<img width="573" alt="スクリーンショット 2019-04-28 22.23.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/54f9bec2-8d4b-18aa-a39b-2d6966e66296.png">

3.その後、作成したプロジェクトで認証情報を作成する
・この画面でAPIキーを選択
<img width="847" alt="スクリーンショット 2019-04-28 22.28.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/e70dd0c0-4dd4-15eb-e498-a7017b46820f.png">

4.キーを制限する
・この時点で自分のAPIキーが作成される
<img width="508" alt="スクリーンショット 2019-04-28 22.31.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/674903b0-11d4-8bba-64ab-1f9fd47034c3.png">

名前：任意の名前
アプリケーションの制限：Androidアプリを選択
<新しいアイテム>
パッケージ名：対象アプリのパッケージ名を入力
SHA-1：★後で説明する★
<img width="626" alt="スクリーンショット 2019-04-28 22.34.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/a27ae014-856d-7bcb-f37c-48ce549368e3.png">

5.SHA-1(しゃーわん)の確認
MacOSだとターミナルを開いて,下記のコマンドを実行する
※JAVA JDKがインストールされてないと実行できません。エラーに従ってインストールしましょう。

```ruby:ターミナル
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
```


・実行結果(例)

```ruby:ターミナル
SHA1: 0R:B9:4Z:33:22:33:AA:BB:CC:55:66:77:GG:88:77:12:34:AB:CD:PP
```
ずら〜と表示された一部にSHA-1のフィンガープリントがあります。
"0R:B9:4Z:33:22:33:AA:BB:CC:55:66:77:GG:88:77:12:34:AB:CD:PP"の部分を選択して
手順4のSHA-1に貼り付けて完了ボタンを押し、保存します。

<img width="488" alt="スクリーンショット 2019-04-28 22.58.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/43764e82-2690-19e4-9555-937b67bef135.png">

保存後、API Keyを確認します。（後で使います）
<img width="1193" alt="スクリーンショット 2019-04-28 23.00.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/e071d484-b4ca-e32f-3c69-190fafaaba6b.png">


#resourcesの追加
res > valuesに google_map_api.xmlを作成して追加

```ruby:google_map_api.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">API Key</string>
</resources>
```
★API Keyは手順5で取得したもの（ココと書いてある部分）

#Permissionの追加
`<manifest>`内に下記を記載する(Parmissionの許可)

```ruby:AndroidManifest.xm
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
```

#OpenGL ESを使用できるようにする
同じくAndroidManifestに追加する(Parmissionと同じ場所でよい)

```ruby:AndroidManifest.xm
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true"/>
```

#meta-dataを追加
序盤に追加したmeta-dataの下ぐらいに追加する

```ruby:AndroidManifest.xm
        </activity>
        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_maps_key"/>
</application>
```

#実装
既存のアプリに組み込む前提で作成しました。

#MapActivity.java
```ruby:MapActivity.java
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MapActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_map);
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney, Australia, and move the camera.
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }
}
```

#activity_map.xml

```ruby:activity_map.xml
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/map"
    tools:context=".MapActivity"
    android:name="com.google.android.gms.maps.SupportMapFragment" />
```


#実行結果
![Screenshot_20190428-233343.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351192/7571ae9e-2f07-9cc6-fe2f-e7e5cf10a1da.jpeg)