Bibliothèque Maps Compose

Jetpack Compose est une boîte à outils d'interface utilisateur native et déclarative qui simplifie et accélère le développement d'UI. Il vous suffit de décrire l'application que vous souhaitez concevoir et Jetpack Compose s'occupe du reste.

La bibliothèque Maps Compose pour le SDK Maps pour Android est un ensemble de fonctions composables et de types de données Open Source que vous pouvez utiliser avec Jetpack Compose pour créer votre application.

La bibliothèque Maps Compose contient des fonctions composables et des types de données qui vous permettent d'effectuer de nombreuses tâches courantes. Voici quelques fonctions composables et types de données couramment utilisés :

Composable Description
Circle Fonction composable permettant d'ajouter un cercle à une carte
GoogleMap Fonction composable permettant d'ajouter une carte
GroundOverlay Fonction composable permettant d'ajouter une superposition au sol à une carte
MapProperties Type de données des propriétés pouvant être modifiées sur une carte
MapUISettings Type de données des paramètres liés à l'interface utilisateur sur une carte
Marker Fonction composable permettant d'ajouter un repère à une carte
Polygon Fonction composable permettant d'ajouter un polygone à une carte
Polyline Fonction composable permettant d'ajouter une polyligne à une carte
TileOverlay Fonction composable permettant d'ajouter une superposition de tuiles à une carte

Pour obtenir la liste complète des fonctions composables et des types de données, consultez la documentation de référence sur la bibliothèque Maps Compose.

Conditions requises

Pour utiliser la bibliothèque Maps Compose avec le SDK Maps pour Android :

  • Téléchargez et installez Android Studio Arctic Fox.

  • Créez un projet Google Maps dans Android Studio avec :

    • Un modèle de type Empty Compose Activity (qui ajoute les dépendances nécessaires pour Jetpack Compose)
    • La version minimale du SDK définie sur API 21: Android 5.0 (Lollipop) ou une version ultérieure
    • Le Langage défini sur Kotlin

  • Obtenez une clé API, puis ajoutez-la à votre projet.

  • Installez la bibliothèque Maps Compose dans le projet, comme indiqué dans la section suivante.

Installation

Pour installer la bibliothèque Maps Compose dans votre projet Google Maps :

  1. Ajoutez les dépendances suivantes à votre fichier build.gradle au niveau du module :

      dependencies {


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

  2. Recréez votre projet dans Android Studio pour synchroniser ces modifications.

Ajouter une carte à votre application

L'exemple suivant montre comment utiliser le composable GoogleMap pour ajouter une carte. 

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

Dans cet exemple, la carte occupe l'espace maximal autorisé, et sa caméra est centrée sur Singapour. Un CameraPositionState est également créé et fourni dans cameraPositionState pour définir la position de la caméra.

L'exemple appelle ensuite le composable Marker dans le contenu de la carte pour ajouter un repère à la carte.

Pour comparer cet exemple à un autre dans lequel la carte est ajoutée à l'aide de Vues, consultez le guide de démarrage rapide. Comme vous pouvez le constater, les fonctions composables nécessitent moins de code et vous évitent d'avoir à vous préoccuper du cycle de vie de la carte.

Définir des propriétés sur une carte

Vous pouvez définir des propriétés sur la carte en fournissant un objet MapProperties (ou MapUiSettings pour les propriétés liées à l'interface utilisateur). Vous pouvez modifier ces objets pour déclencher la recomposition de la carte.

L'exemple ci-dessous utilise un bouton bascule Switch (un composant Material Design) pour activer/désactiver les commandes de zoom sur la carte.

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

Étapes suivantes