Today, we are excited to share an open source library, Maps Compose, which enables you to use the Maps SDK for Android alongside Jetpack Compose. Previously, adding a map to your app with Compose entailed writing a lot of View interoperability code to bridge between Compose and the View-based MapView. Now, you no longer need to do that.

Compose is Android’s declarative, modern native UI toolkit. It simplifies and accelerates UI development by changing the way you think about writing the UI—just describe what you want your app to look like, and Compose will handle the rest. The same is true for Maps Compose, you can now add a map in your Android app with much less code.

This blog post shows you how you can install the library and covers some of its features.

Let’s get started!

Install the Maps Compose library

To install the Maps Compose library, add the following dependencies to your app-level build.gradle file:

dependencies {
    implementation "com.google.maps.android:maps-compose:1.0.0"
    implementation "com.google.android.gms:play-services-maps:18.0.2"
}

After you’ve added this new dependency to your app, rebuild your project in Android Studio to sync the changes. You also need to create and add an API key to your app. See Using API Keys to learn more.

Adding a map to your app 

Once you’ve added Maps Compose as a dependency to your app and have added an API key, you can start using the GoogleMap composable function in your app. If you’re new to Compose, composable functions are essentially the UI building blocks for a Compose-built application.

The simplest example of adding a map to your app is shown below:

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

In the snippet above, the map occupies the maximum allowed space and its camera is centered around Singapore. A CameraPositionState is created and provided in cameraPositionState to set the camera’s position. Lastly, calling the Marker composable function in the content of the map adds a marker to the map.

To compare this example with an example adding a map using Views, see the existing quickstart in the Maps SDK for Android documentation page. Notice how Compose requires much less code, and you don’t have to worry about the map’s lifecycle anymore.

Setting properties on the map

Properties on the map can be set by providing a MapProperties object, or a MapUiSettings object for UI-related properties. You can remember these states and mutate them to trigger recomposition on the map.

In the snippet below, a Switch, which is a Compose Material Component, is added to the view 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)
         }
     )
}

Drawing on the map

Provide a content lambda to the GoogleMap composable to draw objects on the map, such as markers or polygons. 

For example, the snippet below uses the Marker composable to add a marker to the map centered in Singapore.

val singapore = LatLng(1.35, 103.87)

GoogleMap(
    modifier = Modifier.fillMaxSize()
) {
    Marker(
        position = singapore,
        title = "Singapore",
        snippet = "Marker in Singapore"
    )
}

Controlling the camera

The map’s camera can be controlled by providing a CameraPositionState. This object can be used to observe changes to the map’s camera position and can also be used to send camera update commands to the map. 

For example, the snippet below moves the map’s camera to Sydney when the button is clicked.

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

Get started

We’re excited to improve support of Jetpack Compose with Google Maps so that adding a map to your app is faster, and simpler. To get started as quickly as possible, check out the accompanying sample app in the GitHub repository. If you’re new to Jetpack Compose and would like to learn more, check out the Jetpack Compose documentation.

Happy mapping!

For more information on Google Maps Platform, visit our website.