マーカーが配置された地図を追加する

このチュートリアルでは、Google マップを Android アプリに追加する方法を紹介します。地図には、特定の場所を示すマーカー(ピンとも呼ばれます)が配置されています。

Maps SDK for Android を使用して Android アプリを作成するには、このチュートリアルを参考にしてください。推奨される開発環境は Android Studio です。

コードを取得する

GitHub から、Google Maps Android API v2 サンプル リポジトリをダウンロードするかクローンを作成します。

アクティビティの Java バージョンを表示する:

    // Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.mapwithmarker;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

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;

/**
 * An activity that displays a Google map with a marker (pin) to indicate a particular location.
 */
public class MapsMarkerActivity extends AppCompatActivity
        implements OnMapReadyCallback {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps);
        // Get the SupportMapFragment and request notification
        // when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready to be used.
     * This is where we can add markers or lines, add listeners or move the camera. In this case,
     * we just add a marker near Sydney, Australia.
     * If Google Play services is not installed on the device, the user receives a prompt to install
     * Play services inside the SupportMapFragment. The API invokes this method after the user has
     * installed Google Play services and returned to the app.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add a marker in Sydney, Australia,
        // and move the map's camera to the same location.
        LatLng sydney = new LatLng(-33.852, 151.211);
        googleMap.addMarker(new MarkerOptions()
            .position(sydney)
            .title("Marker in Sydney"));
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }
}

    

アクティビティの Kotlin バージョンを表示する:

    // Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.mapwithmarker

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
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

/**
 * An activity that displays a Google map with a marker (pin) to indicate a particular location.
 */
class MapsMarkerActivity : AppCompatActivity(), OnMapReadyCallback {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps)
        if (getString(R.string.maps_api_key).isEmpty()) {
            Toast.makeText(this, "Add your own API key in MapWithMarker/app/secure.properties as MAPS_API_KEY=YOUR_API_KEY", Toast.LENGTH_LONG).show()
        }

        // Get the SupportMapFragment and request notification when the map is ready to be used.
        val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as? SupportMapFragment
        mapFragment?.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap?) {
        googleMap?.apply {
            val sydney = LatLng(-33.852, 151.211)
            addMarker(
                MarkerOptions()
                    .position(sydney)
                    .title("Marker in Sydney")
            )
            moveCamera(CameraUpdateFactory.newLatLng(sydney))
        }
    }
}

    

開発プロジェクトを設定する

次のステップに従って、Android Studio でチュートリアル プロジェクトを作成します。

  1. Android Studio をダウンロードしてインストールします。
  2. Android Studio に Google Play 開発者サービス パッケージを追加します。
  3. (このチュートリアルの閲覧を開始した時点で行っていない場合は)Google Maps Android API v2 のサンプル リポジトリをダウンロードするかクローンを作成します。
  4. 次の手順でチュートリアル プロジェクトをインポートします。

    • Android Studio で、[File] > [New] > [Import Project] を選択します。
    • ダウンロードした Google Maps Android API v2 のサンプル リポジトリの保存先に移動します。
    • 次の場所で MapWithMarker プロジェクトを探します。
      PATH-TO-SAVED-REPO/android-samples/tutorials/java/MapWithMarker
    • プロジェクト ディレクトリを選択して、[OK] をクリックします。Android Studio で、Gradle ビルドツールを使用してプロジェクトが作成されます。

API キーを取得して必要な API を有効にする

このチュートリアルを完了するには、Maps SDK for Android の使用が許可されている Google API キーが必要です。

キーを取得して API を有効にするには、下のボタンをクリックしてください。

使ってみる

詳細については、API キーの取得に関する詳しいガイドをご覧ください。

アプリに API キーを追加する

  1. プロジェクトの gradle.properties ファイルを編集します。
  2. 取得した API キーを GOOGLE_MAPS_API_KEY プロパティの値に貼り付けます。アプリを作成すると、下記のように、Gradle で API キーがアプリの Android マニフェストにコピーされます。

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

アプリをビルドして実行する

  1. Android デバイスをコンピュータに接続します。手順に沿って、Android デバイスでデベロッパー オプションを有効にし、デバイスを検出するようにシステムを設定します(または、Android Virtual Device(AVD)Manager を使用して仮想デバイスを設定することもできます。エミュレータを指定する際は、Google API を含むイメージを選択する必要があります。詳しくは、スタートガイドをご覧ください)。
  2. Android Studio で [Run] メニュー オプション(またはプレイボタン アイコン)をクリックします。 表示される指示に沿ってデバイスを選択します。

Android Studio で Gradle が起動してアプリが作成され、そのアプリがデバイスまたはエミュレータ上で実行されます。このページの画像のように、オーストラリア東海岸のシドニーを示すマーカーが立った地図が表示されます。

トラブルシューティング:

  • 地図が表示されない場合は、上記の手順どおりに API キーを取得してアプリに追加しているかご確認ください。Android Studio の Android Monitor のログでも、API キーに関するエラー メッセージを確認してください。
  • ログを表示してアプリをデバッグするには、Android Studio デバッグツールを使用します。

コードを理解する

このパートでは、MapWithMarker アプリの最も重要な部分について説明します。同様のアプリを作成する方法について理解を深めていただけます。

Android マニフェストを確認する

アプリの AndroidManifest.xml ファイルには次の要素が含まれています。

  • meta-data 要素を追加すると、アプリのコンパイルに使用された Google Play 開発者サービスのバージョンが埋め込まれます。

    <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />
    
  • API キーを指定する meta-data 要素を追加します。このチュートリアルのサンプルでは、API キーの値が文字列 google_maps_key にマッピングされています。 アプリを作成すると、Gradle で API キーがプロジェクトの gradle.properties ファイルからこの文字列値にコピーされます。

    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="@string/google_maps_key" />
    

    API キーがどのように文字列値にマッピングされているかを確認するには、アプリの build.gradle をご覧ください。これには、文字列 google_maps_key を Gradle のプロパティ GOOGLE_MAPS_API_KEY にマッピングする次の行が含まれています。

      resValue "string", "google_maps_key",
              (project.findProperty("GOOGLE_MAPS_API_KEY") ?: "")
    

マニフェストの詳細な例を以下に示します。

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

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

        <!--
             The API key for Google Maps-based APIs.
        -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/maps_api_key" />

        <activity
            android:name=".MapsMarkerActivity"
            android:label="@string/title_activity_maps">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

地図を追加する

Maps SDK for Android を使用して地図を表示します。

  1. アクティビティのレイアウト ファイル(activity_maps.xml)に <fragment> 要素を追加します。この要素では、地図のコンテナとして機能し、GoogleMap オブジェクトへのアクセス権を付与するよう SupportMapFragment を定義します。このチュートリアルでは、Android フレームワークの以前のバージョンとの下位互換性を確保するため、地図フラグメントの Android サポート ライブラリ バージョンを使用します。

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.mapwithmarker.MapsMarkerActivity" />
    
    
  2. アクティビティの onCreate() メソッドで、レイアウト ファイルをコンテンツ ビューとして設定します。FragmentManager.findFragmentById() を呼び出して、地図フラグメントに対するハンドルを取得します。次に、getMapAsync() を使用して、地図コールバックを登録します。

    Java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps);
        // Get the SupportMapFragment and request notification
        // when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }
    

    Kotlin

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps)
        if (getString(R.string.maps_api_key).isEmpty()) {
            Toast.makeText(this, "Add your own API key in MapWithMarker/app/secure.properties as MAPS_API_KEY=YOUR_API_KEY", Toast.LENGTH_LONG).show()
        }
    
        // Get the SupportMapFragment and request notification when the map is ready to be used.
        val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as? SupportMapFragment
        mapFragment?.getMapAsync(this)
    }
    
  3. OnMapReadyCallback インターフェースを実装し、GoogleMap オブジェクトが使用可能な場合に地図を設定するよう onMapReady() メソッドをオーバーライドします。

    Java

    public class MapsMarkerActivity extends AppCompatActivity
            implements OnMapReadyCallback {
    
        // ...
    
        @Override
        public void onMapReady(GoogleMap googleMap) {
            LatLng sydney = new LatLng(-33.852, 151.211);
            googleMap.addMarker(new MarkerOptions()
                .position(sydney)
                .title("Marker in Sydney"));
        }
    }
    

    Kotlin

    class MapsMarkerActivity : AppCompatActivity(), OnMapReadyCallback {
    
        // ...
    
        override fun onMapReady(googleMap: GoogleMap?) {
            googleMap?.apply {
                val sydney = LatLng(-33.852, 151.211)
                addMarker(
                    MarkerOptions()
                        .position(sydney)
                        .title("Marker in Sydney")
                )
            }
        }
    }
    

デフォルトでは、ユーザーがマーカーをタップすると Maps SDK for Android で情報ウィンドウのコンテンツが表示されます。デフォルトの動作で問題なければ、マーカーにクリック リスナーを追加する必要はありません。

次のステップ

マップ オブジェクトと、マーカーを使ってできることについて、詳しく確認します。