このたび、オープンソース ライブラリ Maps Composeの提供を開始することになりました。Maps Compose を使用すると、Maps SDK for Android を Jetpack Composeと一緒に使用できます。Compose を使ってアプリに地図を追加する場合、これまでは Compose とビューベースの MapView の間を橋渡しするために多くのビュー相互運用性コードを記述する必要がありましたが、今後はそういった手間を省くことができます。
Compose は、Android の最新の宣言型ネイティブ UI ツールキットです。UI の記述についての考え方を変えることで、前述の Compose は UI 開発を簡素化と高速化します。つまり、ユーザーはアプリの外観を指定するだけで済み、それ以外は Compose によって処理されます。これは Maps Compose についても同様です。従来よりはるかに少ないコードで Android アプリに地図を追加できるようになりました。
このブログでは、Maps Compose ライブラリをインストールする方法と、その機能の一部について説明します。
さっそく始めましょう。
Maps Compose ライブラリをインストールする
Maps Compose ライブラリをインストールするには、アプリレベルの build.gradle ファイルに次の依存関係を追加します。
dependencies {
implementation "com.google.maps.android:maps-compose:1.0.0"
implementation "com.google.android.gms:play-services-maps:18.0.2"
}
上記の新しい依存関係をアプリに追加したら、Android Studio でプロジェクトを再構築して、変更を同期します。また、Cloud のコンソール経由で、API キーを作成してアプリに追加する必要があります。詳しくは、「API キーを使用する」をご覧ください。
アプリに地図を追加する
Maps Compose を依存関係としてアプリに追加し、API キーを追加したら、アプリでコンポーズ可能な関数 GoogleMap を使用できるようになります。Compose を初めて使用する場合、コンポーズ可能な関数は基本的に、Compose で構築されたアプリケーションの UI ビルディング ブロックとなります。
アプリに地図を追加する最も簡単な例を次に示します。
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"
)
}
上記のスニペットでは、地図が画面内で最大化され、ビューは camera パラーメータでシンガポールの中心に配置されます。googleMapOptionsFactory で提供されるラムダ式は、地図の初期化に使用される GoogleMapOptionsオブジェクトを構築します。最後に、地図のコンテンツでコンポーズ可能な関数 Markerを呼び出すと、地図にマーカーが追加されます。
この例を、ビューを使って地図を追加する例と比較するには、Maps SDK for Android のドキュメント ページにある既存のクイックスタートをご覧ください。Compose の場合は必要なコードがはるかに少なく、地図のライフサイクルを考慮する必要がないことがわかります。
地図上でのプロパティの設定
地図上でプロパティを設定するには、MapProperties オブジェクト、または UI 関連のプロパティ用の MapUiSettings オブジェクトを使用します。これらの状態を管理することで、地図上で再構成をトリガーする際にに利用できます。
次のスニペットでは、地図上のズーム コントロールを切り替えるために、Compose の Material コンポーネントであるスイッチがビューに追加されています。
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)
}
)
}
地図上に図形を表示する
マーカーやポリゴンなどのオブジェクトを地図上に描画するには、コンテンツ ラムダをコンポーズ可能な関数 GoogleMap に提供します。
たとえば次のスニペットでは、コンポーズ可能な Markerを使用して、シンガポールを中心とする地図にマーカーを追加しています。
val singapore = LatLng(1.35, 103.87)
GoogleMap(
modifier = Modifier.fillMaxSize()
) {
Marker(
position = singapore,
title = "Singapore",
snippet = "Marker in Singapore"
)
}
カメラを制御する
地図のビュー内での位置を制御するには、CameraPositionState を使用します。このオブジェクトは、地図のカメラ位置の変更を管理するために使用できます。また、カメラ更新コマンドを地図に送信するために使用することもできます。
たとえば次のスニペットでは、ボタンがクリックされると、地図のカメラをシドニーに移動する方法を表しています。
val singapore = LatLng(1.35, 103.87)
val sydney = LatLng(-33.852, 151.211)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
Box(Modifier.fillMaxSize()) {
GoogleMap(
modifier = Modifier.matchParentSize(),
cameraPositionState = cameraPositionState
)
Button(
onClick = {
cameraPositionState.move(CameraUpdateFactory.newLatLng(sydney))
}
) {
Text(text = "Animate camera to Sydney")
}
}
使用を開始するには
Google マップにおける Jetpack Compose のサポートを改善することで、より迅速かつ簡単にアプリに地図を追加できるようになりました。すぐに使用したい場合は、GitHub リポジトリにある付属のサンプルアプリを利用してご確認ください。Jetpack Compose をこれまで利用したことがない場合は、Jetpack Composeの公式ドキュメントに詳細の記載がありますのでご覧ください。
今後ともどうぞよろしくお願いいたします。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer