Utiliser des ID de carte

Un ID de carte est un identifiant unique qui permet de représenter une seule instance d'une carte Google. Vous utilisez des ID de carte pour activer des fonctionnalités, ou pour gérer ou styliser des cartes sur vos sites Web et dans vos applications. Vous pouvez créer des ID de carte pour chaque plate-forme dont vous avez besoin (JavaScript, Android, iOS ou cartes statiques) dans votre projet Google Cloud Console sur la page Gestion des cartes.

Ce que vous pouvez faire avec les ID de carte

Utilisez des ID de carte pour activer les éléments géographiques et le style. Voici quelques exemples d'utilisation des ID de carte. Pour obtenir la liste complète, consultez la section Fonctionnalités qui utilisent des ID de carte:

  • Styles de cartes basés dans le cloud: associez un ID de carte à un style de carte pour styliser, personnaliser et gérer vos cartes à l'aide de la console Google Cloud. Disponible sur toutes les plates-formes : JavaScript, Android, iOS et API Maps Static.

  • Cartes vectorielles: utilisez un ID de carte pour utiliser une carte composée de tuiles vectorielles dessinées au moment du chargement côté client à l'aide de WebGL. Disponible en JavaScript.

  • Repères avancés: utilisez un ID de carte pour activer les repères avancés. Disponible sur JavaScript, Android et iOS.

Exemple de style de carte basé dans le cloud

Pour utiliser les styles de cartes basés dans le cloud pour styliser les cartes sur votre site Web et vos applications Android, procédez comme suit:

  1. Créez des ID de carte pour chaque plate-forme que vous utilisez. Par exemple, créez un code JavaScript et un ID de carte Android. Pour en savoir plus, consultez Créer des ID de carte.

  2. Configurez un style de carte dans la console Google Cloud. Pour en savoir plus, consultez la section Styles de cartes basés dans le cloud.

  3. Associez vos deux ID de carte au style de carte dans la console Google Cloud. Pour en savoir plus, consultez Associer des ID de carte à votre style.

  4. Faites référence à l'ID de la carte dans le code JavaScript de votre site Web et dans le code de votre application Android. Pour en savoir plus, consultez Ajouter un ID de carte à votre application.

Le style de carte associé à vos ID de carte s'affiche ensuite sur votre site Web et dans votre application Android. Vous pouvez modifier votre style de carte dans la console Cloud. Les modifications s'affichent automatiquement dans les deux emplacements, sans que vos clients aient besoin de mettre à jour leur application.

Fonctionnalités qui utilisent des ID de carte

Le tableau suivant présente les fonctionnalités et les API Google Maps Platform qui utilisent des ID de carte:

Fonctionnalité ou API Utilise des ID de carte pour atteindre ces objectifs
Repères avancés Activez les repères avancés. Vous n'avez pas besoin de créer d'ID de carte. Vous pouvez utiliser l'ID de carte de démonstration "DEMO_MAP_ID".
Style basé sur les données pour les limites Associez l'ID de carte à un ensemble de limites et de styles pour styliser la carte en fonction des limites.
Style basé sur les données pour les ensembles de données Associez l'ID de carte à un ensemble de données et à un style pour styliser la carte en fonction de l'ensemble de données.
Flutter Appliquez un style aux cartes Google utilisées dans vos applications Flutter.
API Maps Embed Spécifiez et stylisez la carte à intégrer sur une page Web.
API Maps JavaScript Appliquez un style à la carte à afficher sur une page Web.
SDK Maps pour Android Appliquez un style à la carte à afficher dans une application Android.1
SDK Maps pour iOS Personnalisez la carte à afficher dans une application iOS.1
API Maps Static Spécifiez et stylisez la carte à afficher en tant qu'image statique.
Solutions de mobilité Utilisez l'API Maps JavaScript et les SDK pour Android et iOS pour styliser les cartes dans les solutions de mobilité1.
WebGL (cartes vectorielles) Activez les fonctionnalités WebGL à l'aide d'un ID de carte vectorielle JavaScript.

1 L'utilisation d'un ID de carte dans le SDK Maps pour Android ou dans le SDK Maps pour iOS déclenche un chargement de carte facturé en fonction du SKU Dynamic Maps.

Créer et utiliser des ID de carte

Un ID de carte est un identifiant unique qui représente une seule instance d'une carte Google. Vous créez des ID de carte et modifiez le style de carte associé à un ID de carte dans la console Cloud.

Autorisations requises

Pour créer ou gérer des ID de carte dans votre projet, vous devez utiliser un principal disposant des autorisations appropriées au niveau du rôle, Éditeur ou Propriétaire, sur la page IAM de Cloud Console du projet. Pour en savoir plus, consultez la page Documentation de référence sur les rôles IAM de base et prédéfinis.

Créer des ID de carte

Vous pouvez créer des ID de carte et mettre à jour un style associé à un ID de carte à tout moment dans Cloud Console.

Pour créer un ID de carte, procédez comme suit:

  1. Connectez-vous à un projet Cloud Console et ouvrez-le avec les autorisations requises.

  2. Dans Cloud Console, accédez à la page Gestion Maps.

  3. Sélectionnez Créer un ID de carte.

    Créer un ID de carte

  4. Sur la page Créer un ID de carte, procédez comme suit:

    1. Dans le champ Name (Nom), attribuez un nom à l'ID de carte.
    2. Facultatif: Dans le champ Description, indiquez à quoi sert l'ID de carte.
    3. Dans Type de carte, sélectionnez la plate-forme sur laquelle vous prévoyez d'utiliser l'ID de carte. Si vous choisissez JavaScript, choisissez également un type de carte Raster (par défaut) ou Vecteur. Pour en savoir plus sur les cartes vectorielles, consultez la section Cartes vectorielles.
    4. Sélectionnez Enregistrer pour afficher votre nouvel ID de carte.

Associer un ID de carte à un style de carte

Dans ces instructions, nous partons du principe que votre projet contient au moins un style de carte. Si vous ne disposez d'aucun style de carte, consultez la section Styles de cartes basés dans le cloud et sélectionnez votre plate-forme pour savoir comment en créer un.

  1. Dans Cloud Console, accédez à la page Gestion Maps.
  2. Dans le tableau, sélectionnez un ID de carte existant.
  3. Sous Style de carte associé, sélectionnez un style de carte.

  4. Sélectionnez Enregistrer.

    Page d'informations d'un ID de carte, où vous pouvez associer un style de carte

Ajouter l'ID de carte à votre application

Android

Vous pouvez ajouter votre ID de carte via un élément <fragment> du fichier de mise en page de l'activité, à l'aide de la classe MapView ou de manière programmatique avec la classe GoogleMapOptions.

Par exemple, supposons que vous ayez créé un ID de carte stocké sous la forme d'une valeur de chaîne nommée map_id dans res/values/strings.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

Pour les cartes ajoutées via un élément <fragment> dans le fichier de mise en page de l'activité, tous les fragments de carte censés être associés au style personnalisé doivent spécifier l'ID de carte dans l'attribut map:mapId:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

Vous pouvez également utiliser l'attribut map:mapId de la classe MapView pour spécifier un ID de carte :

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

Pour spécifier un ID de carte de manière programmatique, transmettez-le à une instance MapFragment à l'aide de la classe GoogleMapOptions:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

Dans Android Studio, créez et exécutez votre application comme vous le faites d'habitude. Les styles personnalisés configurés à la première étape sont appliqués à toutes les cartes avec l'ID de carte spécifié.

iOS

Pour instancier une carte à l'aide d'un ID de carte, procédez comme suit:

  1. Créez un GMSMapID avec la chaîne d'ID de carte à partir de la console Cloud.
  2. Créez un GMSMapView en spécifiant l'ID de carte que vous venez de créer.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

Si vous utilisez votre propre ID de carte, vous pouvez définir un nouveau style pour votre ID de carte dans la console Cloud à tout moment. Ce style sera automatiquement appliqué à votre vue de carte pour vous et les utilisateurs dans un délai d'environ six heures.

Si vous souhaitez voir les modifications immédiatement, vous pouvez fermer et redémarrer votre application en la quittant, en forçant la fermeture de l'application depuis la liste des applications récemment utilisées, puis en la rouvrant. La carte mise à jour s'affiche alors.

JavaScript

Pour créer une carte avec un ID de carte dans le code de votre application:

  1. Si vous personnalisez déjà votre carte avec du code JSON intégré, supprimez la propriété styles de votre objet MapOptions. Sinon, ignorez cette étape.

  2. Ajoutez un ID de carte à la carte à l'aide de la propriété mapId. Exemple :

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

Maps Static

Pour ajouter un ID de carte à une carte nouvelle ou existante qui utilise l'une de nos API de services Web, ajoutez le paramètre d'URL map_id et définissez-le sur votre ID de carte. Cet exemple montre comment ajouter un ID de carte à une carte à l'aide de l'API Maps Static.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

Carte centrée sur le pont de Brooklyn à New York (États-Unis), avec les commandes de la carte en bas à droite. La carte affiche un style personnalisé pour les routes, les cours d&#39;eau et les terres.

Si vous avez déjà ajouté une signature numérique à votre URL statique Maps avant d'ajouter votre ID de carte, vous devrez en créer une autre et l'ajouter après avoir ajouté votre ID de carte. Lorsque vous générez votre nouvelle signature secrète d'URL, n'oubliez pas de supprimer votre ancienne signature numérique de l'URL.