Commencer

Sélectionnez une plate-forme: Android iOS JavaScript

Suivez ces étapes pour configurer les repères avancés.

Obtenir une clé API et activer l'API Maps JavaScript

Avant d'utiliser les repères avancés, vous devez disposer d'un projet Cloud avec un compte de facturation, et l'API Maps JavaScript doit être activée. Pour en savoir plus, consultez Configurer votre projet Google Cloud.

Obtenir une clé API

Créer un ID de carte

Pour créer un ID de carte, suivez les étapes décrites dans Personnalisation dans Cloud. Définissez le type de carte sur JavaScript, puis sélectionnez l'option Vecteur ou Trame.

Important : Pour les tests, vous pouvez ignorer l'étape de création et de configuration d'un ID de carte en utilisant mapId: 'DEMO_MAP_ID' dans le code de votre application. DEMO_MAP_ID est destiné à des fins de test uniquement. N'utilisez pas DEMO_MAP_ID dans un environnement de production.

Modifier le code d'initialisation de la carte

Vous aurez besoin de l'ID de carte que vous venez de créer. Il se trouve sur votre page Gestion des cartes.

1. Chargez l'API Maps JavaScript.

2. Chargez la bibliothèque de repères avancés depuis une fonction async si nécessaire :

   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
   

3. Indiquez un ID de carte lorsque vous instanciez la carte à l'aide de la propriété mapId. Il peut s'agir d'un ID de carte que vous fournissez, ou de DEMO_MAP_ID.

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

Attention : Les exemples de cartes pour les repères avancés utilisent des ID de carte associés à un style de carte avec POI réduits. Si vous réutilisez un exemple de code, nous vous recommandons de remplacer ces ID de carte par DEMO_MAP_ID ou par votre propre ID de carte.

Vérifier les fonctionnalités de la carte (facultatif)

Les repères avancés nécessitent un ID de carte. Si l'ID de carte est manquant, les repères avancés ne seront pas chargés. Pour résoudre ce problème, vous pouvez ajouter un écouteur mapcapabilities_changed pour vous abonner aux modifications des fonctionnalités de la carte. Utiliser des fonctionnalités de la carte est facultatif et n'est recommandé que pour les tests, le dépannage ou une exécution de secours.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Étapes suivantes

Créer un repère avancé par défaut