Android
GoogleMapsAPI
GoogleMapsAndroidV2

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

More than 3 years have passed since last update.


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

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


対象読者


手順


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

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

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

  4. APIアクセスキーの取得

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

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


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

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

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

Tools > Android > SDK Manager > Launch Standalone SDK Manager

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

https://gyazo.com/62b26294fe53a7b000bee0e0082e15bd

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

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

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

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

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

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のフィンガープリントが得られます。

証明書のフィンガプリント:

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に、ブラウザからアクセスし、任意のGoogleアカウントでサインインします。

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

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

https://gyazo.com/0dced1774fee30c70d358f6506bf8299

GoogleAPIタブから、

Google Maps APIGoogle Maps Android APIを選択。

https://gyazo.com/633bb47c97b3112278234b195a70d76b

APIを有効にする を選択。

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

認証情報に進むを選択。

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


  • 使用する API:GoogleMapsAndroidAPI

  • APIを呼び出す場所:Android

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

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

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

APIキー > Androidキー

https://gyazo.com/eb08fa2eff54dc450c03b8aa98d195e4

https://gyazo.com/788b49e6b5ba484e38db39d2ec616049

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

https://gyazo.com/fd05ef40175fea9fdaf66149ab0b1f6d

名前は任意のもので、

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

を選択し、


  • 先ほど作ったSampleMapのパッケージ名

  • ひかえていたSHA-1 証明書のフィンガープリント

を入力し、作成を選択。

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

https://gyazo.com/ecb38e821e606b8e5615b831bab86bee


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

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

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

user-permissionは、マップを利用する上で必要なパーミッションを記述しています。

meta-dataの1つ目は、play-servicesを利用するための指定、2つ目は、さきほど取得した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

無事、APIにアクセスできているのが確認できました。

※ここで、左下にGoogleロゴが表示されているが、マップが表示されない状況は、APIキーが間違っている可能性があります。

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


  1. MapFragmentのオブジェクトをnewInstance()メソッドで生成

  2. FragmentManagerクラスで管理オブジェクトFragmentManagerを取得


  3. beginTransaction()メソッドでフラグメント管理を開始


  4. add()メソッドで追加


  5. commit()メソッドでフラグメント管理を反映

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

以上です。