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'interfaces utilisateur. 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 et de types de données modulables Open Source que vous pouvez utiliser avec Jetpack Compose pour créer votre application.

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

Modulable Description
Circle Fonction modulable permettant d'ajouter un cercle à une carte
GoogleMap Fonction modulable permettant d'ajouter une carte
GroundOverlay Fonction modulable 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 modulable permettant d'ajouter un repère à une carte
Polygon Fonction modulable permettant d'ajouter un polygone à une carte
Polyline Fonction modulable permettant d'ajouter une polyligne à une carte
TileOverlay Fonction modulable permettant d'ajouter une superposition de tuiles à une carte

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

Configuration requise

Afin d'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 les paramètres suivants :

    • Modèle de type Empty Compose Activity (qui ajoute les dépendances nécessaires pour Jetpack Compose)
    • SDK minimal défini sur API 21: Android 5.0 (Lollipop) ou une version ultérieure
    • 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 {
    implementation 'com.google.maps.android:maps-compose:2.11.4'
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
}

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

Ajouter une carte à votre application

L'exemple suivant montre comment utiliser la fonction modulable 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 la fonction modulable Marker dans le contenu de la carte pour y ajouter un repère.

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 modulables 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 (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