💬

Jetpack ComposeでGoogleMapAPIを使ってみる

2023/04/05に公開

Jetpack Compose

tech

はじめに

Jetpack Composeを使ったGoogleMapApiを使った記事が少ないため、少ない情報を参考にAPIを使ってみようと思い、ついでに備忘録を残そうと思いこの記事を執筆しています。

以下のサイト、記事を参考にしています。

依存関係の追加

appレベルのbuild.gradleに以下を追加します。

build.gradle(Module app)

dependencies {
    implementation "com.google.maps.android:maps-compose:1.0.0"
    implementation "com.google.android.gms:play-services-maps:18.0.2"
    '''
}

GoogleMap Composableの追加

参考記事に倣って、GoogleMapのComposableをsetContent内に配置します。
追加するコードは以下のものです。
この時に、気をつけなければいけないのは、インポートするものが２種類出てくるので、Composeに対応したものをインポートすることです。

GoogleMap Composable

val singapore = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState
) {
    Marker(
        position = singapore,
        title = "Singapore",
        snippet = "Marker in Singapore"
    )
}

しかしながら、このままでは、アプリのビルドを行なっても、RuntimeExceptionが発生します。
そのため、プロジェクトに諸々の環境構築を行なっていきます。

meta-dataの追加

AndroidManifest.xmlの<application>内に<meta-data>を追加します。

AndroidManifest.xml

<application>
	...
	<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="your API key" />
	...
</application>

your API keyの部分を発行したAPIキーに置き換えてもビルドが通るようになりますが、今回は安全性を考慮した設計にしていきます。

AndroidManifest.xml

<application>
	...
	<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="${MAPS_API_KEY}" />
	...
</application>

APIキーの設定に伴って

この記事を参考に、環境構築を進めます。
プロジェクトレベルのbuild.gradleのplugin内に以下のコードを追加します。

build.gradle(Project YourApp)

plugins {
	// ...
	id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' version '2.0.1' apply false
}

次にモジュールレベルのbuild.gradle内のplugin内に、以下のコードを追加します。

build.gradle(Module app)

plugin{
	...
	id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

次に、local.propeties内に、MAPS_API_KEYを追加します。
local.propetiesは.gitognoreに指定されるため、GitHubなどに、このファイルが公開されることがなくなります。

local.propeties(Project Propeties)

...
MAPS_API_KEY=abcdefghijklmnopqrstuvwxyz(abcd...を取得したAPIキーに置き換えます)

そして、先程AndroidManifestに追加した<meta-data>に加えて、その直下に以下のコードを追加します。
これにより、このアプリのコンパイルに使用された Google Play 開発者サービスのバージョンが埋め込まれます。

AndroidManifest.xml

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

最後に、AndroidManifestファイル内に位置情報の利用許可のためのコードを追加します。

AndroidManifest.xml

<manifest>
	...
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
	...
</manifest>

アプリをビルドする

以上の環境構築が完了したら、アプリをビルドしましょう。
GoogleMapのシンガポールが表示されれば成功です。

はじめに

依存関係の追加

GoogleMap Composableの追加

meta-dataの追加

APIキーの設定に伴って

アプリをビルドする

Discussion