[初心者向け]AndroidStudioで地図アプリを作ってみよう！[2015年8月最新]

これから超簡単に地図アプリを作成する方法を伝授します。
この記事を最後まで通せば、地図を使ったミニゲームが作れるので興味がある人はぜひやってみてください。
小中学生の人は、夏休みの自由研究にしちゃおう！

Androidのアプリケーションを開発するので以下の環境が揃っている前提でお話します。

• Google Account
• Gmailが使えていれば大丈夫です。

• Android Studio 
• インストールしていない人はこちらからダウンロード！

なぜ地図アプリ？

• とても簡単に実装ができる！
• 位置情報のプログラミング入門に最適
• 地図を扱うアプリケーション開発に強くなる！
• スマホアプリを開発する人なら地図の表示ぐらい知っておかないとちょっと恥ずかしい。
• 逆に地図アプリが作れると「この地図アプリ俺作ったんだぜ？」と自慢できる。

以下の流れで開発していきます。

1. 地図アプリのためのプロジェクトを作成
2. GoogleMapsAPIKeyの取得
3. GoogleMapsの表示
4. GoogleMapsの便利機能の紹介
5. 地図の中央にクロスマークを表示
6. クロスマークの緯度、経度、ズームレベルを表示
7. GoogleMapsを使ったミニゲームの作成

※Google Maps Android API v2を使用します。

ではさっそく手を動かしていきましょー！(o(´∀｀)o))ﾜｸﾜｸ

1.地図アプリのためのプロジェクトを作成

AndroidStudioを起動しよう！

こんなマークです。

Welcome to Android Studio というタイトルの画面が出ると思います。

Start a new Android Studio projectという項目を押して次の画面に進んでください。

前回までのプロジェクトが開いた人は現在のプロジェクトを閉じるか、

File> New> New Project... を押してください。

以下のような画面が出てくるので、任意の名前をいれてください。

私の例

Application name : Google Maps

Company Domain : flatfisher.com
Package name : com.flatfisher.googlemaps
※ドメインはcom.exampleでも構いませんが、com.exampleのままですとリリースができないので注意が必要です。

入力が終えたら　Next を押して次に進んでください。

次にAndroidのデバイス環境の設定に入ります。
こんな画面です。

今回はスマホ向けに作るので、Phone and Tablet のみにチェックを入れます。
SDKのバージョンは今回はAPI15 Android 4.0.3以上とします。
それ以下のバージョンに対応したい場合はAndroidSDKManagerよりSDKをダウンロード
し対応してください。

入力が終えたらNextを押し次へ進みます。

Add an activity to Mobileという画面に入ります！
重要！！
ここで必ずGoogle Maps Activityを選択してください。

選択が終えたらNextを押し次へ進みます。

最後に以下のような画面で名前の設定ができますが、今回はこのままにしておきましょう。

Finishを押しプロジェクトの作成を完了してください。

するとこれで新規プロジェクトの作成が完了しました。

お疲れ様でした！

ちょっと休憩しましょう。

2.Google Maps Keyの取得

これからGoogleMapsを利用するためにKeyを取得します。

前まではこのKey取得がなかなか曲者だったのですが、現在はとても楽にできちゃいます！

※リリース時には新たにKeyの取得が必要ですが、今回は割愛させていただきます。

まず新規プロジェクトを作成すると、いろいろファイルが出てきますが

今回触るのは以下の3つのファイルのみです。

Project Name(Google Maps )/app/src/のなかにある。

1. /main/java/com.../MapsActivity.java
2. /main/res/layout/activity_maps.xml
3. /debug/res/values/google_maps_api.xml

予めに開いておこう！

話がそれてしまいましたが、Key取得の話に戻りましょう！

google_maps_api.xmlを開いてください。

すると・・・

https://console.developers.google.com/flows/enableapi?apiid=・・・

最後には自分のpackagenameが記載されている。

のようなURLが書いてあると思います！

それをまるごとコピーしてください！

コピーが終えたらそれをブラウザで開いてください。

Googleアカウントで既にログインをしている人は以下のような画面になるはずです。

そうでない方はログイン後に以下の画面になると思います。

新しいプロジェクトを作成を選択した状態で、続行をクリックしてください。

すると新しいプロジェクトが作成されます。

プロジェクトが作成されたら、以下のような画面がでます。

APIと認証という項目の認証情報を選択し、公開APIへのアクセスの下にある

新しいキーの作成という項目を選択してください。

すると以下のようなダイアログが出てくるので、Androidキーを選択してください。

するとまた以下のようなダイアログが出てきます。

何を入力していいかちんぷんかんだと思いますが、ここで一度AndroidStudioに戻りましょう。

またまたgoogle_maps_api.xmlのお世話になります。

google_maps_api.xmlのなかに、You can also add your credentials to an existing key, using this line:

と書かれたメッセージがあるので、そのしたにあるコードをまるごと１行コピーし、

先ほどのダイアログに貼り付けてください。

そして貼り付けが終えたら、作成をクリックすればKeyの完成です。

以下のような画面が出たと思います。

APIキーを全てコピーしてください。

そして、AndroidStudioに戻りgoogle_maps_api.xmlの中の

<string 

name="google_maps_key" 

translatable="false" 

templateMergeStrategy="preserve">YOUR_KEY_HERE</string>

YOUR_KEY_HEREという部分にコピーしたAPIキーを貼り付ければ完成です！

※空白は入れないでください。

3.GoogleMapsの表示

ここまでの作業が終えたら、実機にアプリを転送してみよう！

アプリの転送はAndroidStudio上部のメニューある

　をクリックするだけ！

するとデバイス先の確認ダイアログが出ます。

問題がなければそのままOKを押そう！

デバックすると・・・

なんと１行もコードがを書いていないのに地図が表示されちゃった！

地図アプリ作成のためのサンプルコードが予め用意されていたということです。

めっちゃ簡単ですね！

このサンプルは緯度経度が0度の場所にピンを立てるというサンプルでした。

もし表示されていない人がいれば、GoogleMapsキーの取得がうまくいっていない可能性があります。もう一度確認してみましょう。

ここから先はサンプルコードをちょっとずつ編集しながら、地図アプリを作っていきます！

わくわくしてきますね〜！

4.GoogleMapsの便利機能の紹介

いよいよミニゲーム作り！と言いたいところなのですが、

GoogleMapsのAPIには便利機能がいくつかあるので３つほど紹介します。

なんとこちらの機能は１機能１行のコードで出来ちゃう！！

・Google Mapsに現在地の場所までジャンプするボタンをつけよう！

GoogleMapをいつも使っている人にはお馴染みのボタンかと思います。

とりあえずボタン設置後のスクショを貼ります。

実装はとっても簡単！たった1行のみ！！

MapsActivity.javaを開いてください。

すると下の方にスクロールすると、

private void setUpMap() {
    mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
}

このようなコードがあると思います。

そこに

mMap.setMyLocationEnabled(true);
を追加するだけです。

完成形はこんな感じです。

private void setUpMap() {
    mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
    mMap.setMyLocationEnabled(true);
}
※trueをfalseにすると非表示となります。
コードを書き終えたら、上書き保存し先ほどのようにデバックしアプリを実機へ転送してください。

・渋滞状況を表示しよう！

次に紹介するのは渋滞情報の表示です、なんとGoogleMapsAPIでは渋滞情報の表示も提供しています。

そしてこれもなんとたった１行で実装できちゃいます！

実装後の画面はこんな感じです。

赤くなっている部分が混み合っているところです。

お盆の帰省ラッシュなどをGoogleMapから高みの見物ができちゃいますね(^^)

実装は以下のコードを先ほどのメソッドに追加するだけです。

mMap.setTrafficEnabled(true);

private void setUpMap() {
    mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
    mMap.setMyLocationEnabled(true);
    mMap.setTrafficEnabled(true);
}


・衛生写真モードにしよう！
GoogleMapsAPIは衛生写真を使った地図の表示も提供しています。
そしてこれもまたたった１行で。
もう頭があがりません。



一気にイメージが変わりましたね^^;

衛星写真モードにするには以下のコードを追加するだけです。

mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);

現在のコードはこんな感じです。

private void setUpMap() {
    mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
    mMap.setMyLocationEnabled(true);
    mMap.setTrafficEnabled(true);
    mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
}

衛星写真をロードにすこし時間がかかるので、必要に応じての実装をオススメします。

ですので次に進む前に衛生写真にするコードをコメントアウトしておこう！



private void setUpMap() {
    mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
        mMap.setMyLocationEnabled(true);
        mMap.setTrafficEnabled(true);
//        mMap.setMapType(GoogleMap.);    }

[ちょっと応用]
GoogleMapの表示タイプにはまだいくつかあります。

ヒントが以下の画像にあるので、余裕がある方は挑戦してみてください。

5.地図の中央にクロスマークを表示

地図の中央にクロスマークを表示させます。

activity_maps.xmlを開いてください。

開くと以下のようなコードだと思います。

今回はFrameLayoutという親画面とTextViewを使い地図の中央にクロスマークを実装します。
Viewの主な使い方は今回は割愛させていただきます。
興味ある方はFrameLayoutとTextViewをググって調べてください。

activity_maps.xmlを以下のように書き換えてください。








少し解説します。

TextViewの中のtext="+"でクロスマークを表現しています。

クロスマークの大きさを変えたい場合はtextSize="50dp"の値を変えてください。

色を変更する場合はtextColor="#0000FF"で好きな色コードを入れると変更可能です。

gravity="center"で地図の中央に設置しています。



入力が終えたら、アプリをデバックしてください。

中央に青いクロスマークが表示されれば成功です。









5.クロスマークの緯度、経度、ズームレベルを表示



いよいよここまで来ましたね。

ミニゲーム完成までもう少しです。



クロスマークの緯度、経度、ズームレベルを取得し画面に表示させます。

※ズームレベルとは、どれだけ地図を縮小したかを示したレベルです。


activity_maps.xmlを開いてください。
クロスマークの情報を取得した時の情報を表示させるために新たにTextViewを追加します。

※注意事項！
idという要素が加わりました。
これは後に絶対必要になるので書き忘れに注意してください。
現在のactivity_maps.xmlコードはこんな感じです。





次にMapsActivity.javaを開いてください。

onCreateメソッドの上にTextViewを宣言してください。
変数名はcenterLocatinTextにしました。
そしてonCreateの中にTextViewの中身を入れてください。
先ほどactivity_maps.xmlを紐付けします。



private GoogleMap mMap; 
private TextView centerLocationText;

@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_maps);
    setUpMapIfNeeded();
　　centerLocationText = (TextView)findViewById(R.id.center_location_textView);

}



次に下へスクロールし、setUpMap()の中のmMapに以下のようなリスナーを追加します。
こうすることで、地図の中央の位置が変わるたびにイベントを呼び出すことができます。


mMap.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
    @Override    public void onCameraChange(CameraPosition cameraPosition) {
        
    }
});


現在のsetUpMapメソッドは以下の通りです。

 private void setUpMap() {
    mMap.addMarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker"));
        mMap.setMyLocationEnabled(true);
        mMap.setTrafficEnabled(true);
        mMap.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
            @Override            public void onCameraChange(CameraPosition cameraPosition) {

            }
        });
    }








ここまできたらあとはonCameraChangeの中で値を取得し、centerTextViewに代入するだけです。


mMap.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
    @Override    public void onCameraChange(CameraPosition cameraPosition) {
        double zoomLevel = cameraPosition.zoom;
        double latitude = cameraPosition.target.latitude;
        double longitude = cameraPosition.target.longitude;

        String centerText = "zoom level " + zoomLevel + "\n"
 　　　　　　　　　　　　　　　+ "latitude "+latitude + "\n"
 　　　　　　　　　　　　　　　+ "longitude " + longitude;

        centerLocationText.setText(centerText);
    }
});







以下のように値が反映し表示ができていれば成功です。









6.GoogleMapsを使ったミニゲームの作成



いよいよここまできました！

ここまで付き合ってくれた皆さん、ありがとうございます！

いよいよお待ちかねミニゲーム作りです。



どんなゲームかと言うと、位置情報当てゲームです。

何かお題がを出し、そのお題に適している場所まで行くと正解と通知を出すゲームです。

ここまでのコードをうまく応用していきます。



それでは書いていきましょう！

まずはactivity_maps.xmlを開いて、お題を表示するTextViewを書いてください。




次にMapsActivity.javaを開いてください。

onCreateの上に正解情報を予め書き込んでおきましょう！

ズームレベルの上限と下限
緯度の上限と下限
経度の上限と下限

これら３つが揃うとき正解とします。

private double zoomLower = 8;private double zoomUpper = 17;private double latitudeLower = 35;private double latitudeUpper = 36;private double longitudeLower = 139;private double longitudeUpper = 140;
※今回は正解が出やすいように範囲を広めに設定しています。
setUpMapの中にあるonCameraChangeで位置情報の判定を行っています。
３つの条件が揃い次第、Toastで正解という文字を出しています。


@Overridepublic void onCameraChange(CameraPosition cameraPosition) {
    double zoomLevel = cameraPosition.zoom;
    double latitude = cameraPosition.target.latitude;
    double longitude = cameraPosition.target.longitude;

    String centerText = 　　"zoom level " + zoomLevel + "\n"
 　　　　　　　　　　　　　　　+ "latitude "+latitude + "\n"
 　　　　　　　　　　　　　　　+ "longitude " + longitude;

    centerLocationText.setText(centerText);

    if (zoomLevel<=zoomUpper&&zoomLevel>=zoomLower&&
            latitude<=latitudeUpper&&latitude>=latitudeLower&&
            longitude<=longitudeUpper&&longitude>=longitudeLower){

        Toast.makeText(MapsActivity.this,"正解!",Toast.LENGTH_SHORT).show();

    }

}






今回は簡単に正解したかどうかを出すためにToast使用しましたが、正直あまり味気ないです。

これをToastではなくオリジナルの可愛い画像などを表示させればもっと良い物ができるかもしれません。

興味がある方はどんどん挑戦してみよう！

これで全ての実装が完了です、いかがだったでしょうか。
GoogleMapsはあまり労力を使わず実装できる上に、見た目もはっきりしています。

さらにこのマップを応用すれば本当に多くのアプリケーションを開発することができます。



GoogleMapsが好きになった人は、ぜひGoogleMapsを使用したアプリ開発にチャレンジしてみてください！


今回のソースコードはGithubで公開しています。

こちらから→Github