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 este kit se encargue del resto.

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

La biblioteca de Maps Compose permite realizar muchas tareas comunes con sus tipos de datos y funciones que admiten composición, algunos de los cuales son los siguientes:

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

Para obtener una lista completa de todas las funciones y los tipos de datos que admiten composición, consulta la referencia sobre la biblioteca de Maps Compose.

Requisitos

A fin de 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 Maps en Android Studio con lo siguiente:

    • Usa un tipo de plantilla Empty Compose Activity. Esta plantilla agrega las dependencias necesarias que requiere Jetpack Compose.
    • La opción Minimum SDK debe estar configurada en API 21: Android 5.0 (Lollipop) o versiones posteriores.
    • 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 {
    implementation 'com.google.maps.android:maps-compose:2.11.4'
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
}

  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 que admite composición 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 su cámara se centra en la zona de Singapur. También se crea una clase CameraPositionState y se la proporciona en cameraPositionState para establecer la posición de la cámara.

En el ejemplo, se llama al elemento marcador que admite composición en el contenido del mapa para agregar un marcador.

Para comparar este ejemplo con otro que agrega un mapa con Views, consulta la Guía de inicio rápido. Observa cómo las funciones que admiten composición 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, se usa 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