Créer des ID de carte

Sélectionnez une plate-forme : Android iOS JavaScript Services Web

Un ID de carte est un identifiant unique qui représente les paramètres de style et de configuration de Google Maps stockés dans Google Cloud. Vous utilisez des ID de carte pour activer des fonctionnalités, ou 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 de la console Google Cloud, sur la page Gestion des cartes.

Pour en savoir plus sur les ID de carte et les fonctionnalités qui les utilisent, consultez Présentation des ID de carte.

Autorisations requises

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

Créer des ID de carte

Créez des ID de carte dans la console Cloud en suivant ces étapes :

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

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

  3. Cliquez sur 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 Nom, attribuez un nom à l'ID de carte.
    2. Facultatif : Dans le champ Description, décrivez l'utilisation de l'ID de carte.
    3. Pour Type de carte, sélectionnez la plate-forme sur laquelle vous prévoyez d'utiliser l'ID de carte. Si vous choisissez JavaScript, sélectionnez également un type de carte Raster (par défaut) ou Vector. Pour en savoir plus sur les cartes vectorielles, consultez Cartes vectorielles.
    4. Cliquez sur Enregistrer pour afficher votre nouvel ID de carte.

Associer un ID de carte à un style de carte

Si vous utilisez les styles de cartes basés dans le cloud, vous associez un style de carte à votre ID de carte. Pour en savoir plus, consultez Associer votre style à un 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é, à 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:map="http://schemas.android.com/apk/res-auto"
    ....
    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 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 dans la console Cloud à tout moment. Ce style sera automatiquement appliqué à votre vue de carte pour vous et vos 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 la forçant à quitter la liste des applications récemment utilisées, puis en la rouvrant. Le plan mis à 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 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 service 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 des commandes de carte en bas à droite. La carte affiche un style personnalisé pour les routes, l&#39;eau et les terres.

Si votre URL Maps Static contient une signature numérique avant l'ajout de votre ID de carte, vous devrez créer et ajouter une nouvelle signature numérique 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 signature numérique précédente de l'URL.