Biblioteca de Maps Compose

Jetpack Compose es un kit de herramientas de IU declarativo y nativo que simplifica y acelera el desarrollo de la IU. Con Jetpack Compose, describes cómo deseas que se vea tu app y, luego, dejas que el kit de herramientas se encargue del resto.

La biblioteca de Maps Compose del SDK de Maps para Android es un conjunto de tipos de datos y funciones de componibilidad de código abierto que puedes usar con Jetpack Compose para crear tu app.

La biblioteca de Maps Compose permite realizar muchas tareas comunes con sus tipos de datos y funciones de componibilidad, algunos de los cuales son los siguientes:

Componible Descripción
Circle Es una función de componibilidad para agregar un círculo a un mapa.
GoogleMap Es una función de componibilidad para agregar un mapa.
GroundOverlay Es una función de componibilidad para agregar una superposición de suelo a un mapa.
MapProperties Es un tipo de datos para las propiedades que se pueden modificar en un mapa.
MapUISettings Es un tipo de datos para la configuración relacionada con la IU en un mapa.
Marker Es una función de componibilidad para agregar un marcador a un mapa.
Polygon Es una función de componibilidad para agregar un polígono a un mapa.
Polyline Es una función de componibilidad para agregar una polilínea a un mapa.
TileOverlay Es una función de componibilidad para agregar una superposición de mosaicos a un mapa.

Para obtener una lista completa de todas las funciones de componibilidad, consulta la Referencia de la biblioteca de Maps Compose.

Requisitos

Para utilizar la biblioteca de Maps Compose con el SDK de Maps para Android, debes hacer lo siguiente:

  • Descarga e instala Android Studio Arctic Fox.

  • Crea un proyecto de Google Mapsen Android Studio con lo siguiente:

    • Usa un tipo de plantilla Empty Compose Activity. Esta plantilla agrega las dependencias necesarias que requiere Jetpack Compose.
    • Minimum SDK debe estar configurado en API 21: Android 5.0 (Lollipop) o posterior.
    • El lenguaje debe estar configurado en Kotlin.

  • Obtén una clave de API y agrégala a tu proyecto.

  • Instala la biblioteca de Maps Compose en el proyecto como se describe en la siguiente sección.

Instalación

Para instalar la biblioteca de Maps Compose en tu proyecto de Google Maps, sigue estos pasos:

  1. Agrega las siguientes dependencias a tu archivo build.gradle a nivel del módulo:

      dependencies {


    // Android Maps Compose composables for the Maps SDK for Android
    implementation 'com.google.maps.android:maps-compose:4.4.1'
}

  2. Vuelve a compilar tu proyecto en Android Studio para sincronizar estos cambios.

Cómo agregar un mapa a tu app

En el siguiente ejemplo, se muestra cómo usar el elemento componible GoogleMap para agregar un mapa. 

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

En este ejemplo, el mapa ocupa el espacio máximo permitido y la cámara se centra en la zona de Singapur. También se crea y se proporciona una clase CameraPositionState en cameraPositionState para establecer la posición de la cámara.

En el ejemplo, se llama al elemento componible Marker en el contenido del mapa para agregar un marcador.

Para comparar este ejemplo con otro que agrega un mapa con tipos de vistas, consulta la Guía de inicio rápido. Notarás que las funciones de componibilidad requieren menos código y no tienes que preocuparte por el ciclo de vida del mapa.

Cómo definir propiedades en un mapa

Puedes configurar las propiedades del mapa proporcionando un objeto MapProperties o un objeto MapUiSettings para las propiedades relacionadas con la IU. Puedes modificar estos objetos para activar la recomposición del mapa.

En el siguiente ejemplo, usa un Switch, un componente de Material Design, para activar o desactivar los controles de zoom en el mapa.

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

Próximos pasos