Maps Compose ライブラリ

Jetpack Compose は宣言型ネイティブ UI ツールキットです。Jetpack Compose を使うと、アプリの外観を記述するだけで、残りは自動的に処理されるため、UI を素早く簡単に開発できます。

Maps SDK for Android 用の Maps Compose ライブラリには、Jetpack Compose で使用できる、アプリをビルドするためのコンポーズ可能な関数とデータ型のセットがオープンソースとして用意されています。

Maps Compose ライブラリで用意されている、一般的に使用できるコンポーズ可能な関数とデータ型には、次のようなものがあります。

コンポーズ可能な関数 説明
Circle 円を地図に追加するコンポーズ可能な関数。
GoogleMap 地図を追加するコンポーズ可能な関数。
GroundOverlay オーバーレイを地図に追加するコンポーズ可能な関数。
MapProperties 地図上で変更できるプロパティのデータ型。
MapUISettings 地図上の UI 関連設定向けのデータ型。
Marker マーカーを地図に追加するコンポーズ可能な関数。
Polygon ポリゴンを地図に追加するコンポーズ可能な関数。
Polyline ポリラインを地図に追加するコンポーズ可能な関数。
TileOverlay タイル オーバーレイを地図に追加するコンポーズ可能な関数。

すべてのコンポーズ可能な関数とデータ型の一覧については、Maps Compose ライブラリのリファレンスをご覧ください。

要件

Maps SDK for Android で Maps Compose ライブラリを使用するには、次の要件を満たす必要があります。

  • Android Studio Arctic Fox をダウンロードしてインストールしていること。

  • Android Studio で次を使用して Google マップ プロジェクトを作成していること。

    • 空の Compose Activity のテンプレート タイプ。このテンプレートを使って、Jetpack Compose に必要な依存関係を追加します。
    • 最小 SDK が API 21: Android 5.0（Lollipop）以降に設定されていること。
    • 言語が Kotlin に設定されていること。

  • API キーを取得し、プロジェクトに追加します。

  • 次のセクションの説明に沿って、プロジェクトに Maps Compose ライブラリをインストールします。

インストール

Google マップ プロジェクトに Maps Compose ライブラリをインストールするには:

  1. モジュール レベルの build.gradle ファイルに次の依存関係を追加します。

      dependencies {
    implementation 'com.google.maps.android:maps-compose:2.11.4'
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
}

  2. Android Studio でプロジェクトを再ビルドして、これらの変更を同期します。

アプリに地図を追加する

次のサンプルは、コンポーズ可能な関数 GoogleMap を使用して地図を追加する方法を示しています。

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

上記のサンプルでは、地図は最大許容スペースを占有し、カメラの中心がシンガポールになります。また、カメラの位置を設定するために、CameraPositionState（cameraPositionState）が作成、使用されています。

次に、地図上のコンテンツ内にコンポーズ可能な関数 Marker を呼び出して、地図にマーカーを追加します。

クイックスタートでは、このサンプルと、Views を使用して地図を追加するサンプルを比較できます。コンポーズ可能な関数を使用すると、必要とするコードが少なくなり、地図のライフサイクルを気にする必要もありません。

地図上にプロパティを設定する

地図にプロパティを設定するには、MapProperties オブジェクトか、MapUiSettings オブジェクト（UI 関連プロパティ用）を指定します。これらのオブジェクトを変更して、地図の再構成をトリガーできます。

以下のサンプルでは、Switch（マテリアル デザイン コンポーネント）を使用して、地図のズーム コントロールを切り替えています。

var uiSettings by remember { mutableStateOf(MapUiSettings()) }
var properties by remember {
  mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
}

Box(Modifier.fillMaxSize()) {
  GoogleMap(
    modifier = Modifier.matchParentSize(),
    properties = properties,
    uiSettings = uiSettings
  )
  Switch(
    checked = uiSettings.zoomControlsEnabled,
    onCheckedChange = {
      uiSettings = uiSettings.copy(zoomControlsEnabled = it)
    }
  )
}

次のステップ