0Pricing
Android Academy · Leçon

Afficher une carte

Ajoutez Google Maps à votre application.

Afficher une carte est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Placer votre application sur la carte

Les cartes transforment des coordonnées brutes en quelque chose que les utilisateurs peuvent voir et explorer. Dans cette leçon, vous ajouterez une Google Map interactive à un écran Jetpack Compose à l'aide de la bibliothèque officielle maps-compose.

À la fin, vous pourrez intégrer une véritable carte que l'on peut déplacer et agrandir ou réduire dans n'importe quel composable. Commençons par mettre en place les éléments de base.

La bibliothèque Maps Compose

Google fournit un adaptateur compatible avec Compose appelé maps-compose. Il expose un composable GoogleMap, ce qui vous évite de manipuler directement l'ancien MapView XML.

Ajoutez ces dépendances au module contenant votre build.gradle.kts. L'artefact play-services-maps constitue le SDK sous-jacent ; maps-compose l'adapte à Compose.

// build.gradle.kts (module)
dependencies {
    implementation("com.google.maps.android:maps-compose:6.1.0")
    implementation("com.google.android.gms:play-services-maps:19.0.0")
}

Obtenir une clé d'API

Google Maps nécessite une clé d'API. Créez-en une dans Google Cloud Console, activez le Maps SDK for Android, puis placez la clé dans votre AndroidManifest.xml, à l'intérieur de la balise <application>.

Ne codez jamais la clé en dur dans du code source que vous publiez. Stockez-la dans local.properties et injectez-la via l'espace réservé du manifeste.

<!-- AndroidManifest.xml, inside <application> -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

Votre premier GoogleMap

La carte la plus simple est un unique composable GoogleMap. Donnez-lui un Modifier.fillMaxSize() et vous obtenez instantanément une carte que l'on peut déplacer et agrandir ou réduire.

Elle n'a besoin d'aucun enfant pour s'afficher : les tuiles de Google sont rendues automatiquement dès que votre clé d'API est valide.

import com.google.maps.android.compose.GoogleMap

@Composable
fun MapScreen() {
    GoogleMap(
        modifier = Modifier.fillMaxSize()
    )
}

Contrôler la caméra

La caméra détermine la zone affichée par la carte et son niveau de zoom. Vous fournissez un CameraPositionState mémorisé entre les recompositions.

Créez un CameraPosition à partir d'un LatLng (latitude, longitude) et d'un niveau de zoom. Plus le zoom est élevé, plus la vue est rapprochée.

import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.rememberCameraPositionState

val sanFrancisco = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(sanFrancisco, 12f)
}

Intégrer la caméra à la carte

Transmettez ce cameraPositionState à GoogleMap afin que la carte s'ouvre centrée à l'endroit souhaité. Comme l'état est mémorisé, les déplacements et les zooms de l'utilisateur sont conservés lors de la recomposition.

@Composable
fun CenteredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
}

Propriétés de la carte

MapProperties configure ce que la carte affiche. Les options courantes incluent le type de carte (normal, satellite, relief, hybride) et l'activation ou non du point bleu de ma position.

Mémorisez l'objet de propriétés afin qu'il ne soit pas recréé à chaque recomposition.

import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType

val properties = remember {
    MapProperties(
        mapType = MapType.NORMAL,
        isMyLocationEnabled = false
    )
}

Paramètres de l'interface de la carte

MapUiSettings active ou désactive les commandes à l'écran : boutons de zoom, boussole, bouton de ma position et gestes.

Désactivez les commandes dont vous n'avez pas besoin pour obtenir une apparence plus épurée — par exemple, masquez les boutons de zoom tout en conservant les gestes de zoom par pincement.

import com.google.maps.android.compose.MapUiSettings

val uiSettings = remember {
    MapUiSettings(
        zoomControlsEnabled = false,
        compassEnabled = true,
        scrollGesturesEnabled = true,
        zoomGesturesEnabled = true
    )
}

Tout réunir

Combinez la caméra, les propriétés et les paramètres de l'interface dans une seule carte configurée. C'est la structure typique d'un écran de carte destiné à la production.

@Composable
fun ConfiguredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    val properties = remember { MapProperties(mapType = MapType.NORMAL) }
    val uiSettings = remember { MapUiSettings(zoomControlsEnabled = false) }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState,
        properties = properties,
        uiSettings = uiSettings
    )
}

Réagir aux clics sur la carte

GoogleMap expose des rappels tels que onMapClick. Utilisez-les pour réagir lorsque l'utilisateur appuie sur la carte — par exemple pour récupérer un LatLng choisi.

Conservez le point touché dans l'état afin que votre interface puisse réagir.

@Composable
fun ClickableMap() {
    var picked by remember { mutableStateOf<LatLng?>(null) }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        onMapClick = { latLng -> picked = latLng }
    )
    picked?.let { p ->
        Text("Picked: ${p.latitude}, ${p.longitude}")
    }
}

Le cycle de vie est géré pour vous

Avec le MapView XML classique, vous deviez transmettre manuellement chaque événement du cycle de vie. La bibliothèque maps-compose relie automatiquement la carte au cycle de vie de la composition.

Vous n'avez donc plus besoin de gérer manuellement onResume/onPause/onDestroy — une raison de plus de privilégier l'API Compose pour les nouveaux écrans.

Vérification rapide

Quel objet d'état composable mémorisez-vous et transmettez-vous à GoogleMap pour contrôler le centrage et le niveau de zoom de la carte ?

Récapitulatif

Vous savez maintenant placer une véritable carte Google dans Compose :

  • Ajoutez maps-compose et play-services-maps, ainsi qu'une clé d'API dans le manifeste.
  • Affichez une carte avec le composable GoogleMap.
  • Centrez-la et définissez son zoom avec rememberCameraPositionState et CameraPosition.
  • Personnalisez-la avec MapProperties et MapUiSettings, et réagissez aux appuis avec onMapClick.

Ensuite : récupérer la position réelle de l'appareil pour centrer la carte sur l'utilisateur.

Questions Fréquemment Posées

La leçon « Afficher une carte » est-elle gratuite ?

Oui — le texte complet de « Afficher une carte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Afficher une carte » ?

Ajoutez Google Maps à votre application. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Afficher une carte » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Afficher une carte
  2. Obtenir la position de l’utilisateur
  3. Marqueurs et caméra
  4. Bien gérer les autorisations de localisation
← Retour à Android Academy