Androidアプリ開発でGoogleMapを利用する

# GoogleMapを利用したアプリを作ってみるチュートリアル

Androidアプリ開発で、GoogleMapを利用したことがないAndroidアプリ開発入門者向けの記事です。

# 対象読者

- AndroidStudioでの環境構築が出来ている
- 実機デバッグが出来るようになっている
    - Genymotionを使う場合こちらが詳しいです→[AndroidStudio × Genymotion で Google Maps Android API v2を動かすメモ](http://qiita.com/tabachain/items/1a274ba6634176db8ea0)


# 手順

1. Google Play servicesライブラリのインストール
1. サンプルアプリのプロジェクト作成
1. Google Play servicesライブラリのインポート
1. APIアクセスキーの取得
1. APIアクセスキー、各permissionの追加
1. 実際にマップを表示するアプリを実装する

# Google Play servicesライブラリのインストール

**Google Play services**をインストールします。

Android Studioを起動し、メニューから

`Tools` > `Android` > `SDK Manager` > `Launch Standalone SDK Manager`

を選択し、SDK Managerを立ち上げます。

[![https://gyazo.com/62b26294fe53a7b000bee0e0082e15bd](https://i.gyazo.com/62b26294fe53a7b000bee0e0082e15bd.png)](https://gyazo.com/62b26294fe53a7b000bee0e0082e15bd)

Packagesの一覧が表示されたら、一番下のExtraの中にある`Google Play services`を選択し、`install packages...`する。

[![https://gyazo.com/945bc6b859010b88f1245d80bcdc29a6](https://i.gyazo.com/945bc6b859010b88f1245d80bcdc29a6.png)](https://gyazo.com/945bc6b859010b88f1245d80bcdc29a6)

これで、**Google Play servicesライブラリ**のインストールは完了です。

# サンプルアプリのプロジェクト作成

Android Studioのメニューから

`File` > `New` > `New Project...`

を選択し、CreateNewProjectウィンドウが立ち上がったら、

- Application Name : `SampleMaps`（任意の名前）
- その他はデフォルトのまま

で`Next`で次へ。

Target Android Devicesについては、

- Minimum SDK : 実機のAndroidOSに合わせる

`Next`で次へ。

Activityの種類については、`Empty Activity`にする。

`Next`で次へ。

Customize the Activityは、デフォルトのまま。

ひとまず、プロジェクトができます。

# Google Play servicesライブラリのインポート

先ほど作った、`SampleMaps`のAndroid Studioのメニューから、

`File` > `Project Structure` 

を選択します。

[![https://gyazo.com/f96504af2f67d80c499f58580fc143a1](https://i.gyazo.com/f96504af2f67d80c499f58580fc143a1.png)](https://gyazo.com/f96504af2f67d80c499f58580fc143a1)

ProjectStructureが立ち上がったら、右側の`Modules`の`app`を選択します。

上部タブの`Dependencies`を選択します。

ウィンドウ下部左側の`➕`から`Library Dependency`を選択します。

[![https://gyazo.com/eca480328df5dd3930924b1f296506e0](https://i.gyazo.com/eca480328df5dd3930924b1f296506e0.png)](https://gyazo.com/eca480328df5dd3930924b1f296506e0)

`play-services`を選択し、`OK`。

これでこのプロジェクトにおいて、Google Play servicesライブラリをインポートすることができました。

# APIアクセスキーの取得

ここから一旦AndroidStudioの作業からは離れて、APIアクセスキーの取得を行います。

Google Maps Android APIを利用するためのAPIを取得に関しては、`SHA-1フィンガープリント`が必要となります。

>`SHA-1フィンガープリント`とは、APIアクセスキーを利用する自分の環境を証明するためのもの。SHA-1とは、データの改ざん検知などに使われるハッシュ関数の一つで、フィンガープリントとは、このハッシュ関数から得られたハッシュ値のこと。

## SHA-1を調べる

### Windowsの場合

コマンドプロンプトで

`cd "(JDKのbinディレクトリ)"`

のディレクトに移動し、（JDKのバージョンによってPathが異なる）

`keytool -list -v -keystore "C:¥Users¥{Your account name}¥.android¥debug.keystore" -alias androiddebugkey -storepass android -keypass android"`

で、表示されます。

### MacOSの場合

Terminalで、

`keytool -v -list -keystore ~/.android/debug.keystore`

で表示されます。

---

`キーストアのパスワードを入力してください:`には何も入力せず、`Enter`。

すると、以下のとおりSHA-1のフィンガープリントが得られます。

``` SHA-1フィンガープリント
証明書のフィンガプリント:
	 MD5:  12:34:56:78:90:AB:CD:EF:12:34:56:78:90:AB:CD:EF:AA:BB:CC:DD
	 SHA1: 12:34:56:78:90:AB:CD:EF:12:34:56:78:90:AB:CD:EF:AA:BB:CC:DD ←これがSHA-1フィンガープリント
```

今後必要となるので、SHA-1フィンガープリントをひかえます。


## Google Developers ConsoleでAPIアクセスキーを取得する

次に、[Google Developers Console](https://console.developers.google.com/project)に、ブラウザからアクセスし、任意のGoogleアカウントでサインインします。

`プロジェクトを作成` > 任意のプロジェクト名を入力し`作成`を選択。

ダッシュボードに遷移したら、青い`GoogleAPIを利用する`カードを選択。

[![https://gyazo.com/0dced1774fee30c70d358f6506bf8299](https://i.gyazo.com/0dced1774fee30c70d358f6506bf8299.png)](https://gyazo.com/0dced1774fee30c70d358f6506bf8299)

GoogleAPIタブから、

`Google Maps API`の`Google Maps Android API`を選択。


[![https://gyazo.com/633bb47c97b3112278234b195a70d76b](https://i.gyazo.com/633bb47c97b3112278234b195a70d76b.png)](https://gyazo.com/633bb47c97b3112278234b195a70d76b)


`APIを有効にする` を選択。

すると、`この API は有効になっていますが、...`という警告が出てくるので、

`認証情報に進む`を選択。

`プロジェクトへの認証情報の追加`が開いたら、

- 使用する API：GoogleMapsAndroidAPI
- APIを呼び出す場所：Android

で、`必要な認証情報`を選択。

完了したら、`キャンセル`で認証情報ページに遷移する。

真ん中のカードの`新しい認証情報`ボタンを選択し、

`APIキー` > `Androidキー`

[![https://gyazo.com/eb08fa2eff54dc450c03b8aa98d195e4](https://i.gyazo.com/eb08fa2eff54dc450c03b8aa98d195e4.png)](https://gyazo.com/eb08fa2eff54dc450c03b8aa98d195e4)

[![https://gyazo.com/788b49e6b5ba484e38db39d2ec616049](https://i.gyazo.com/788b49e6b5ba484e38db39d2ec616049.png)](https://gyazo.com/788b49e6b5ba484e38db39d2ec616049)

を選択する。`Android API キーの作成`ページでは、

[![https://gyazo.com/fd05ef40175fea9fdaf66149ab0b1f6d](https://i.gyazo.com/fd05ef40175fea9fdaf66149ab0b1f6d.png)](https://gyazo.com/fd05ef40175fea9fdaf66149ab0b1f6d)

名前は任意のもので、

`➕  パッケージ名とフィンガープリントを追加`

を選択し、

- 先ほど作った`SampleMap`のパッケージ名
- ひかえていたSHA-1 証明書のフィンガープリント

を入力し、`作成`を選択。

すると、APIキーが発行されるのでひかえます。

[![https://gyazo.com/ecb38e821e606b8e5615b831bab86bee](https://i.gyazo.com/ecb38e821e606b8e5615b831bab86bee.png)](https://gyazo.com/ecb38e821e606b8e5615b831bab86bee)


# APIアクセスキー、各permissionの追加

Android Studioの`SampleMap`プロジェクトに戻って、`AndroidManifest.xml`にパーミッション関連、APIアクセスキーを記述します。


[![https://gyazo.com/4a8936400e9e3c1367679c8a68de00cb](https://i.gyazo.com/4a8936400e9e3c1367679c8a68de00cb.png)](https://gyazo.com/4a8936400e9e3c1367679c8a68de00cb)

``` AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.hoge.samplemap">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="APIキーを入力する" />

    </application>
</manifest>
```

変更点は以下の赤枠で囲った部分です。

[![https://gyazo.com/613fef1fdc82bb92b6b52202a4777b94](https://i.gyazo.com/613fef1fdc82bb92b6b52202a4777b94.png)](https://gyazo.com/613fef1fdc82bb92b6b52202a4777b94)


`user-permission`は、マップを利用する上で必要なパーミッションを記述しています。
`meta-data`の１つ目は、`play-services`を利用するための指定、２つ目は、さきほど取得したAPIキーを指定しています。

これで、プロジェクトでGoogle Maps Android API v2が利用できるようになりました。

# 実際にマップを表示するアプリを実装する

パーミッションとAPIキーの追加ができたので、実際にGoogleMapを表示するアプリを実装します。

``` MainActivity.java
package com.example.hoge.samplemap;

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;

public class MainActivity extends AppCompatActivity {

    MapFragment mf;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mf = MapFragment.newInstance();

        FragmentManager fm = getFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
        ft.add(android.R.id.content, mf);
        ft.commit();
    }
}
```


[![https://gyazo.com/1f2386d7816739898212792cf76e2691](https://i.gyazo.com/1f2386d7816739898212792cf76e2691.png)](https://gyazo.com/1f2386d7816739898212792cf76e2691)


無事、APIにアクセスできているのが確認できました。
※ここで、左下にGoogleロゴが表示されているが、マップが表示されない状況は、APIキーが間違っている可能性があります。

Google Maps Android API v2 のマップを利用するために、マップフラグメント（MapFragment）クラスを用います。

1. MapFragmentのオブジェクトを`newInstance()`メソッドで生成
1. FragmentManagerクラスで管理オブジェクト`FragmentManager`を取得
1. `beginTransaction()`メソッドでフラグメント管理を開始
1. `add()`メソッドで追加
1. `commit()`メソッドでフラグメント管理を反映

という手順を踏んで実装します。

以上です。