このたび、オープンソース ライブラリ 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
アプリに地図を追加する最も簡単な例を次に示します。
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 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
このたび、オープンソース ライブラリ 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
アプリに地図を追加する最も簡単な例を次に示します。
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 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 に関する詳しい情報はこちら をご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer
