Maps Compose Library

Jetpack Compose is a declarative, native UI toolkit that simplifies and accelerates UI development. With Jetpack Compose, you describe what you want your app to look like, and then let Jetpack Compose handle the rest.

The Maps Compose library for the Maps SDK for Android is a set of open-source composable functions and data types that you can use with Jetpack Compose to build your app.

The Maps Compose library contains composable functions and data types that let you perform many common tasks. Some of the commonly used composable functions and data types include:

Composable Description
Circle Composable function to add a circle to a map.
GoogleMap Composable function to add a map.
GroundOverlay Composable function to add a ground overlay to a map.
MapProperties Data type for properties that can be modified on a map.
MapUISettings Data type for UI-related settings on a map.
Marker Composable function to add a marker to a map.
Polygon Composable function to add a polygon to a map.
Polyline Composable function to add a polyline to a map.
TileOverlay Composable function to add a tile overlay to a map.

For a complete list of all composable functions and data types, see Maps Compose library reference.

Requirements

To use the Maps Compose library with the Maps SDK for Android you must:

  • Download and install Android Studio Arctic Fox.

  • Create a Google Maps project in Android Studio with:

    • A template type of Empty Compose Activity. This template adds the necessary dependencies required by Jetpack Compose.
    • Minimum SDK set to API 21: Android 5.0 (Lollipop) or later.
    • Language set to Kotlin.

  • Obtain an API key and add it to your project.

  • Install the Maps Compose library in the project as described in the next section.

Installation

To install the Maps Compose library in your Google Maps project:

  1. Add the following dependencies to your module-level build.gradle.kts file:

      dependencies {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.1.0")
}

  2. Rebuild your project in Android Studio to sync these changes.

Add a map to your app

The following example shows how to use the GoogleMap composable to add a map. 

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

In this example, the map occupies the maximum allowed space and its camera is centered around Singapore. A CameraPositionState is also created and provided in cameraPositionState to set the camera’s position.

The example then calls the Marker composable in the content of the map to add a marker to the map.

To compare this example with an example that adds a map using Views, see the QuickStart. Notice how composable functions requires less code, and you don’t have to worry about the map’s lifecycle.

Set properties on a map

You can set properties on the map by providing a MapProperties object, or a MapUiSettings object for UI-related properties. You can modify these objects to trigger recomposition of the map.

In the example below, use a Switch, a Material Design component, to toggle zoom controls on the map.

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)
    }
  )
}

What's next