泥部

Androidアプリ開発の入門サイトです。

【Android】MapViewにGoogle Mapを表示する

f:id:ayb:20181012214505j:plain

こんばんは。 @okuzawats です。Androidアプリ内でGoogle Mapを表示させたいことってありますよね。私はありました。簡単にできそうなものですが、躓くポイントがいくつかあったので実装方法をメモしておきます。実装方法はいくつかあると思いますが、今回はMapViewを使っていきます。

まずはapp/build.gradleに以下の記述を追加して、MapViewが使えるようにします。記述を追加したら、忘れずにSyncします。これだけでMapViewが使えるようになるかと思います。

dependencies {
    // Google Map
    implementation 'com.google.android.gms:play-services-maps:16.0.0'
}

次に、レイアウトファイル内にMapViewを追加します。お好みで配置しましょう。ここまでは特に難しいことはないかと思います。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.gms.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Activityでは、OnMapReadyCallbackを実装して、地図が表示可能になったタイミングで送られてくるコールバックを受け取れるようにします。Fragmentでも同様です。また、onCreateonResumeでMapViewを表示するための準備を行います。onResumeMapView#onResumeを呼ばないといつまで待っても地図が表示されません(ハマった)。

class MainActivity : AppCompatActivity(), OnMapReadyCallback {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mapView.onCreate(savedInstanceState)
        mapView.getMapAsync(this)
    }

    override fun onResume() {
        super.onResume()
        mapView.onResume()
    }

    override fun onMapReady(googleMap: GoogleMap?) {
        // do something here
    }
}

AndroidManifest.xmlには、Google Mapのメタデータを記述します。

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

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

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

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

最後に、google_map_api.xmlというリソースファイルを作り、以下の「YOUR API KEY HERE」という箇所にAPIキーを記述します。Google MapのAPIキーは、あらかじめGoogle Developer Consoleから取得、有効化しておきましょう。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">YOUR API KEY HERE</string>
</resources>

以上で、Androidアプリ内にGoogle Mapを表示できるようになったかと思います。