Android Academy · レッスン

地図を表示する

Q: 「地図を表示する」で何を学びますか？

アプリにGoogle Mapsを追加します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

アプリにGoogle Mapsを追加します。

「地図を表示する」はCoddyKit上の無料Android Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。

アプリに地図を表示する

地図を使うと、生の座標をユーザーが見て探索できるものに変えられます。このレッスンでは、公式のmaps-composeライブラリを使って、Jetpack Composeの画面にインタラクティブなGoogle Mapを追加します。

レッスンの最後には、パン操作やズーム操作ができる本物の地図を、任意のコンポーザブルに配置できるようになります。まずは必要な構成要素をそろえましょう。

Maps Composeライブラリ

Googleは、Compose向けのラッパーであるmaps-composeを提供しています。これによりGoogleMapコンポーザブルが使えるため、古いXMLのMapViewを直接扱う必要はありません。

これらの依存関係をモジュールのbuild.gradle.ktsに追加します。play-services-mapsアーティファクトは基盤となるSDKで、maps-composeはそれをCompose向けに適応させます。

// build.gradle.kts (module)
dependencies {
    implementation("com.google.maps.android:maps-compose:6.1.0")
    implementation("com.google.android.gms:play-services-maps:19.0.0")
}

APIキーを取得する

Google MapsにはAPIキーが必要です。Google Cloud Consoleでキーを作成し、Maps SDK for Androidを有効にしてから、AndroidManifest.xmlの<application>タグ内にキーを配置します。

公開リポジトリにコミットするソースコードに、キーを直接ハードコードしてはいけません。local.propertiesに保存し、マニフェストプレースホルダー経由で注入してください。

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

最初のGoogleMap

最もシンプルな地図は、単一のGoogleMapコンポーザブルです。Modifier.fillMaxSize()を指定するだけで、パン操作やズーム操作ができる地図をすぐに表示できます。

表示のために子要素は必要ありません。APIキーが有効であれば、Googleのタイルが自動的に描画されます。

import com.google.maps.android.compose.GoogleMap

@Composable
fun MapScreen() {
    GoogleMap(
        modifier = Modifier.fillMaxSize()
    )
}

カメラを制御する

カメラによって、地図の表示位置とズーム倍率が決まります。再コンポジションをまたいで記憶するCameraPositionStateを指定します。

LatLng（緯度、経度）とズームレベルからCameraPositionを構築します。ズーム値が大きいほど、拡大表示になります。

import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.rememberCameraPositionState

val sanFrancisco = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(sanFrancisco, 12f)
}

カメラをマップに接続する

cameraPositionStateをGoogleMapに渡して、マップを目的の位置を中心に開きます。状態が保持されるため、ユーザーが行ったパンやズームは再コンポジション後も維持されます。

@Composable
fun CenteredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
}

マップのプロパティ

MapPropertiesでは、マップに表示する内容を設定します。一般的なオプションには、マップタイプ（通常、衛星、地形、ハイブリッド）や、青い現在地ドットを有効にするかどうかがあります。

再コンポジションのたびに再構築されないよう、プロパティオブジェクトをrememberしてください。

import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType

val properties = remember {
    MapProperties(
        mapType = MapType.NORMAL,
        isMyLocationEnabled = false
    )
}

マップUIの設定

MapUiSettingsでは、画面上のコントロールを切り替えます。ズームボタン、コンパス、現在地ボタン、ジェスチャーなどです。

すっきりした見た目にするため、不要なコントロールは無効にしてください。たとえば、ズームボタンを非表示にして、ピンチによるズームは有効にできます。

import com.google.maps.android.compose.MapUiSettings

val uiSettings = remember {
    MapUiSettings(
        zoomControlsEnabled = false,
        compassEnabled = true,
        scrollGesturesEnabled = true,
        zoomGesturesEnabled = true
    )
}

すべてを組み合わせる

カメラ、プロパティ、UI設定を組み合わせて、設定済みのマップを作成します。これは、実運用のマップ画面で一般的な構成です。

@Composable
fun ConfiguredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    val properties = remember { MapProperties(mapType = MapType.NORMAL) }
    val uiSettings = remember { MapUiSettings(zoomControlsEnabled = false) }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState,
        properties = properties,
        uiSettings = uiSettings
    )
}

マップのタップに反応する

GoogleMapはonMapClickなどのコールバックを提供します。これらを使うと、ユーザーがマップをタップしたときに処理を実行できます。たとえば、選択されたLatLngを取得できます。

タップされた地点を状態として保持し、UIがそれに反応できるようにします。

@Composable
fun ClickableMap() {
    var picked by remember { mutableStateOf<LatLng?>(null) }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        onMapClick = { latLng -> picked = latLng }
    )
    picked?.let { p ->
        Text("Picked: ${p.latitude}, ${p.longitude}")
    }
}

ライフサイクルは自動的に処理される

従来のXMLのMapViewでは、すべてのライフサイクルイベントを手動で転送する必要がありました。maps-composeライブラリでは、マップとコンポジションのライフサイクルが自動的に接続されます。

つまり、手動でonResume/onPause/onDestroyをつなぐ処理は不要です。新しい画面ではCompose APIを優先する理由が、もう1つ増えます。

理解度チェック

マップの中心位置とズームを制御するために、どのコンポーザブル状態オブジェクトをrememberしてGoogleMapに渡しますか？

まとめ

これで、Composeに実際のGoogle Mapを配置できるようになりました。

maps-composeとplay-services-mapsを追加し、マニフェストにAPI keyを設定します。
GoogleMapコンポーザブルでマップを描画します。
rememberCameraPositionStateとCameraPositionで、マップの中心とズームを設定します。
MapPropertiesとMapUiSettingsでカスタマイズし、onMapClickでタップに反応します。

次は、デバイスの実際の位置情報を取得し、ユーザーを中心にマップを表示します。

よくある質問

「地図を表示する」レッスンは無料ですか？

はい。「地図を表示する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。

「地図を表示する」で何を学びますか？

アプリにGoogle Mapsを追加します。ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「地図を表示する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか？

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Android Academyに戻る