[Jetpack Compose](https://developer.android.com/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](https://github.com/googlemaps/android-maps-compose)
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](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-circle.html) | Composable function to add a circle to a map. |
| [GoogleMap](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-google-map.html) | Composable function to add a map. |
| [GroundOverlay](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-ground-overlay.html) | Composable function to add a ground overlay to a map. |
| [MapProperties](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-properties/index.html) | Data type for properties that can be modified on a map. |
| [MapUISettings](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-ui-settings/index.html) | Data type for UI-related settings on a map. |
| [Marker](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-marker.html) | Composable function to add a marker to a map. |
| [Polygon](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-polygon.html) | Composable function to add a polygon to a map. |
| [Polyline](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-polyline.html) | Composable function to add a polyline to a map. |
| [TileOverlay](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-tile-overlay.html) | 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](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/index.html).

## Requirements

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

- [Download](https://developer.android.com/studio/index.html) and install Android Studio Arctic Fox.
- [Create a Google Maps project](https://developers.google.com/maps/documentation/android-sdk/config.md.txt)
  in Android Studio with:

  - A template type of **Empty Compose Activity**. This template adds the necessary dependencies required by Jetpack Compose.

  > [!NOTE]
  > **Note:** Do not create a project of type **Google Maps Activity** when using Jetpack Compose.

  - **Minimum SDK** set to **Android API Level 23 ("Marshmallow"; Android 6.0)** or later.
  - **Language** set to **Kotlin**.
- Obtain an [API key](https://developers.google.com/maps/documentation/android-sdk/get-api-key.md.txt)
  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:

   <br />

   ```yaml
     dependencies {

       // Modern Android projects use version catalogs to manage dependencies. To include the Maps Compose library,
       // first add the following to your gradle/libs.versions.toml file:
       //
       // [versions]
       // mapsCompose = "8.4.0"
       //
       // [libraries]
       // maps-compose = { module = "com.google.maps.android:maps-compose", version.ref = "mapsCompose" }
       //
       // Android Maps Compose composables for the Maps SDK for Android
       implementation(libs.maps.compose)
       // If your project does not use a version catalog, you can use the following dependency instead:
       //
       //    implementation("com.google.maps.android:maps-compose:8.4.0")
   }
   ```

   <br />

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](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-google-map.html)
composable to add a map.

```java
val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberUpdatedMarkerState(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](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-camera-position-state/index.html) is also created and provided in `cameraPositionState` to set the camera's position.

The example then calls the
[Marker](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-marker.html)
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](https://developers.google.com/maps/documentation/android-sdk/start.md.txt). 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](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-properties/index.html)
object, or a [MapUiSettings](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-ui-settings/index.html) object for
UI-related properties. You can modify these objects to trigger recomposition of
the map.

In the example below, use a [Switch](https://material.io/components/switches),
a [Material Design component](https://material.io/),
to toggle zoom controls on the map.

```java
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

- View the [Maps Compose library](https://github.com/googlemaps/android-maps-compose) GitHub project page.
- View the [Jetpack Compose documentation](https://developer.android.com/jetpack/compose).