Biblioteca do Maps Compose

O Jetpack Compose é um kit de ferramentas de IU nativo e declarativo que simplifica e acelera o desenvolvimento da interface. Você descreve como deve ser a aparência do app, e o Jetpack Compose cuida de tudo.

A biblioteca do Maps Compose do SDK do Maps para Android é um conjunto de funções combináveis de código aberto e tipos de dados que pode ser usado com o Jetpack Compose para criar seu app.

Essa biblioteca contém funções combináveis e tipos de dados que permitem executar várias tarefas comuns. Estes são alguns dos mais usados:

Combinável Descrição
Circle Função combinável para adicionar um círculo a um mapa.
GoogleMap Função combinável para adicionar um mapa.
GroundOverlay Função combinável para adicionar uma sobreposição de solo a um mapa.
MapProperties Tipo de dados de propriedades que podem ser modificadas em um mapa.
MapUISettings Tipo de dados para configurações relacionadas à IU em um mapa.
Marker Função combinável para adicionar um marcador a um mapa.
Polygon Função combinável para adicionar um polígono a um mapa.
Polyline Função combinável para adicionar uma polilinha a um mapa.
TileOverlay Função combinável para adicionar uma sobreposição de blocos a um mapa.

Para conferir uma lista completa de funções combináveis e tipos de dados, consulte a referência da biblioteca Maps Compose.

Requisitos

Para usar a biblioteca do Maps Compose com o SDK do Maps para Android:

  • Faça o download e instale o Android Studio Arctic Fox.

  • Crie um projeto do Google Maps no Android Studio com este itens:

    • Um tipo de modelo de Atividade do Compose vazia. Esse modelo adiciona as dependências exigidas pelo Jetpack Compose.
    • SDK mínimo definido como API 21: Android 5.0 (Lollipop) ou uma versão mais recente.
    • A linguagem definida como Kotlin.

  • Obtenha e adicione uma chave de API ao projeto.

  • Instale a biblioteca do Maps Compose no projeto, conforme descrito na próxima seção.

Instalação

Para instalar a biblioteca do Maps Compose no seu projeto do Google Maps, faça o seguinte:

  1. Adicione as seguintes dependências ao arquivo build.gradle.kts do módulo:

      dependencies {

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

  2. Recrie seu projeto no Android Studio para sincronizar essas mudanças.

Adicionar um mapa ao seu app

O exemplo a seguir mostra como usar a função combinável GoogleMap para adicionar um mapa. 

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

Neste exemplo, o mapa ocupa o espaço máximo permitido, e a câmera dele está centralizada em Singapura. Um objeto CameraPositionState também é criado e fornecido em cameraPositionState para definir a posição da câmera.

O exemplo então chama a função combinável Marker no conteúdo do mapa para adicionar um marcador.

Para comparar este exemplo a outro que adiciona um mapa usando visualizações, consulte o guia de início rápido. Observe como as funções combináveis exigem menos código, e você não precisa se preocupar com o ciclo de vida do mapa.

Definir propriedades em um mapa

É possível definir propriedades no mapa fornecendo um objeto MapProperties ou MapUiSettings para propriedades relacionadas à interface. Você pode modificar esses objetos para acionar a recomposição do mapa.

No exemplo abaixo, use uma chave, um componente do Material Design para alternar os controles de zoom no 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óxima etapa