はじめに

こんにちは。SD(システム・デザイン)部の青木です。
今回は簡単なGoogleMapsアプリの作成についてご紹介します。
具体的には、Googleマップにマーカーを立て、クリックした地点とマーカーをつなぐという動きを実現する方法となります。

AndoroidではじめてのGoogleMapsアプリの作成

前提

事前にAndroidStudioの環境構築まで完了していることを前提とします。
http://developer.android.com/intl/ja/sdk/index.html

Android SDK ManagerでGoogle Play Serviceをインストールする

Android SDK ManagerはAndroid StudioのToolsメニューからAndroid→SDK Managerで開くことができます。
Google Maps Android API v2を使用する場合はGoogle Repositoryもインストールします。

1

Google Maps APIキーの取得

下記にアクセスします
https://console.developers.google.com/project

「プロジェクトを作成」を選択します。

2

プロジェクト名を入力し作成を選択します。

3

「Google APIを利用する」を選択します。

4

「Google Maps Android API」を選択します。

5

「APIを有効にする」を選択、「承認情報」を選択します。

6

「承認情報を追加」から「APIキー」を選択します。

7

「Androidキー」を選択します。

8

プロジェクトのパッケージ名とSHA-1証明のフィンガープリントを入力し、作成ボタンをクリックします。
SHA-1証明のフィンガープリントは下記コマンドをコマンドプロンプトに入力して取得します。
        keytool -list -v -keystore %USERPROFILE%\.android\debug.keystore

※%USERPROFILE%は「c:\Users\ユーザー名」のフォルダのことになります 　コマンドを入力するとキーストアのパスワードを聞かれますが、Enterで進めてください

9
10

プロジェクトの作成

Android StudioのFileメニューからNew→New Project…を選択します。
Application nameを入力し、Nextをクリックします。

11

下記画面で作成するアプリケーションのAPIを決めることが出来ます。
今回はAndroid4.1を選択しました。
Nextをクリックします。

12

Google Maps Activityを選択します。
Nextをクリックします。

13

Activity名を任意で決めることが出来ます。
今回はデフォルトの下記内容のまま進めます。

14

作成されたプロジェクトのgoogle_maps_api.xmlのgoogle_maps_keyに作成したAPIキーを入力します。
（YOUR_KEY_HEREを削除しAPIキーを入力）

15

16

作成したプロジェクトを実行します。

17

マップの初期設定では経度・緯度が0の地点が表示されます。

マップの初期表示地点を変更する

Activity_maps.xmlを編集することで初期表示の地点を変更することが出来ます。

fragmentにmap要素を追加します。
        xmlns:map=http://schemas.android.com/apk/res-auto

初期に表示する地点を指定します。

        map:cameraTargetLat="35.642558"
        map:cameraTargetLng="139.71377"

初期表示時のズームレベルを設定します。

        map:cameraZoom="15.0"

※値を大きくすると更に拡大して表示します。今回は恵比寿ガーデンプレイス周辺を初期表示しました。

18

19

マップにマーカーを表示する

import　com.google.android.gms.maps.model.MarkerOptions;
import　com.google.android.gms.maps.model.Marker;

// 中略

MarkerOptions options = new MarkerOptions();
options.position(new LatLng(35.642558, 139.71377));
options.title("テストMaker");
options.snippet("補足情報を記載");
Marker marker = mMap.addMarker(options);
marker.showInfoWindow();

マーカーのインスタンスを生成し、positionメソッドで
マーカーを表示する地点の経度と緯度を設定したLatLngインスタンスを渡します。

        MarkerOptions options = new MarkerOptions();
        options.position(new LatLng(35.642558, 139.71377));

マーカーに表示するメイン情報と補足情報追加します。

        options.title("テストMaker");
        options.snippet("補足情報を記載");

作成したマーカーをマップに表示します。

        mMap.addMarker(options);

マーカーのメイン情報・補足情報を表示します。
（この処理を実装しない場合はマーカーのアイコンのみ表示される状態となります）

        marker.showInfoWindow();

クリックした地点とマーカーを線でつなぐ

Mapをクリックしたときの処理は下記に実装します。
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.model.LatLng;

// 中略

mMap.setOnMapClickListener(new GoogleMap.OnMapClickListener(){
    @Override
    public void onMapClick(LatLng latLng){
        // Mapをクリックしたときの処理
    }
});

※mMapはGoogleMap型のインスタンス変数です。（下記はプロジェクト作成時にデフォルトで作成されます）

import com.google.android.gms.maps.SupportMapFragment;

// 中略

mMap= ((SupportMapFragment) getSupportFragmentManager()
 　　　　　　　　　　　　　　　　　.findFragmentById(R.id.map)).getMap();

20

クリックした地点に点を表示し、点とマーカーを線でつなぐ処理

CircleOptions circleOptions = new CircleOptions().center(latLng).radius(3);
mMap.addCircle(circleOptions);
if (refuge != null) {
    PolylineOptions polyOptions = new PolylineOptions();
    polyOptions.add(latLng);
    polyOptions.add(new LatLng(35.642558, 139.71377));
    polyOptions.color(Color.GRAY);
    polyOptions.width(3);
    polyOptions.geodesic(true); //true:大圏コース　false:直線
    mMap.addPolyline(polyOptions);
}

21

ガーデンプレイス付近にマーカーを配置しクリックした地点を線でつなぐ

これまでの処理を使い、クリックした地点から最も近い3か所のマーカーを点とつなぎ、
最も近いマーカーの上部にマーカーの情報を表示するようにしました。

22

最後に

いつも便利に使わせていただいているGoogleMapsを使ったアプリも、
意外と簡単に作成できることが分かった非常に良い機会でした。

お時間の許す方はぜひ本ブログも参考にしていただき、
GoogleMapsアプリの作成にチャレンジしていただくと面白いかと思います。

最後までお読み下さりありがとうございました！

【参考】
作ればわかる！Androidプログラミング 第3版 SDK5/Android Studio対応 10の実践サンプルで学ぶAndroidアプリ開発入門
著者：金宏 和實
出版：翔泳社