Utiliser des ID de carte

Un ID de carte est un identifiant associé à un style de carte ou un élément géographique spécifique. Configurez un style de carte et associez-le à un ID de carte dans la console Google Cloud. Ensuite, lorsque vous référencez un ID de carte dans votre code, le style de carte qui lui est associé s'affiche dans votre application. Toutes les modifications de style apportées par la suite apparaissent automatiquement dans votre application, sans que vos clients aient besoin d'effectuer des mises à jour.

Lors de leur création, les ID de carte sont associés à un projet et limités à une seule plate-forme (Android, iOS, JavaScript) ou à l'API Maps Static.

Pour créer ou gérer des ID de carte dans Cloud Console, vous devez disposer du rôle IAM Propriétaire de projet ou Éditeur de projet.

Autorisations requises

Pour créer ou gérer des ID de carte ou des styles de carte dans un projet Google Cloud donné, vous devez détenir le rôle IAM Propriétaire ou Éditeur sur le projet.

Créer un ID de carte

Un ID de carte est un identifiant unique qui représente une seule instance d'une carte Google. Vous pouvez créer des ID de carte et mettre à jour un style associé à tout moment dans Cloud Console.

Pour créer un ID de carte:

  1. Dans Cloud Console, accédez à la page Gestion Maps.
  2. Sélectionnez Créer un ID de carte pour afficher le formulaire Créer un ID de carte.
    Créer un ID de carte

    Dans le formulaire, procédez comme suit :

    • Spécifiez un nom de carte.
    • Spécifiez un type de carte ou une plate-forme.
    • Pour les cartes JavaScript, choisissez le type matriciel ou vectoriel.
    • Saisissez une description pour la carte.
    • Sélectionnez Suivant pour afficher le 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.

  1. Dans Cloud Console, accédez à la page Gestion Maps.
  2. Sur cette page, sélectionnez un ID de carte existant dans la colonne Nom de la carte.
  3. En bas du formulaire, choisissez un style de carte dans le menu déroulant Styles de carte associés à cet ID de carte.
  4. Sélectionnez Enregistrer.
    Capture d'écran montrant la page d'informations d'un seul ID de carte, y compris le champ qui permet aux utilisateurs d'associer un style de carte à cet ID de carte.

Ajouter l'ID de carte à votre application

Android

Ajoutez votre ID de carte via un élément <fragment> dans le fichier de mise en page de l'activité, en utilisant la classe MapView ou de manière automatisée à l'aide de 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">YOUR_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"
    class="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 tels que configurés à la première étape seront appliqués à toutes les cartes avec un ID.

iOS

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

  1. Créez un GMSMapID avec la chaîne d'ID de carte dans Cloud Console.
  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: "<YOUR 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:@"<YOUR 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 votre ID de carte dans un nouveau style à tout moment dans Cloud Console. Ce style sera automatiquement appliqué à votre vue plan 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. Pour ce faire, quittez l'application, forcez sa fermeture à partir de la liste des applications récemment utilisées, puis rouvrez-la. La carte mise à jour sera alors visible.

JavaScript

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

  1. Si vous personnalisez actuellement votre carte avec un code JSON intégré, supprimez la propriété styles de l'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=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

Une carte centrée sur le pont de Brooklyn à New York, aux États-Unis, avec des commandes dans l&#39;angle inférieur droit. La carte affiche un style personnalisé sur les routes, sur l&#39;eau et sur les terres.

Si vous avez une signature numérique dans votre URL statique Maps avant d'ajouter votre ID de carte, vous devez créer et ajouter une signature numérique après avoir ajouté votre ID de carte. Lorsque vous générez votre signature secrète d'URL, n'oubliez pas de supprimer votre signature numérique précédente de l'URL.

Éléments géographiques disponibles lorsque vous utilisez des ID de carte

Personnalisation de cartes dans Google Cloud : stylisez, personnalisez et gérez vos cartes à l'aide de Google Cloud Console.
Disponible sur toutes les plates-formes (API Android, JavaScript, iOS et Maps Static).

Cartes vectorielles: carte composée de tuiles basées sur des vecteurs, dessinées au moment du chargement côté client à l'aide de WebGL.
Disponible sur JavaScript