Biblioteca do Maps Compose

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

A biblioteca do Maps Compose para o SDK do Maps para Android é um conjunto de funções de composição 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 de composição e tipos de dados que permitem executar várias tarefas comuns. Estes são alguns dos mais usados:

Função de composição Descrição
Circle Função de composição para adicionar um círculo a um mapa.
GoogleMap Função de composição para adicionar um mapa.
GroundOverlay Função de composição 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 de composição para adicionar um marcador a um mapa.
Polygon Função de composição para adicionar um polígono a um mapa.
Polyline Função de composição para adicionar uma polilinha a um mapa.
TileOverlay Função de composição 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

Se você quiser usar a biblioteca do Maps Compose com o SDK do Maps para Android, faça o seguinte:

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

  • Crie um projeto do Google Maps no Android Studio com os seguintes 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.
    • 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 do 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. 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 de composição GoogleMap para adicionar um 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"
  )
}

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 chama a função de composição 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 QuickStart. Observe como as funções de composição 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 à IU. 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