Commencer

Suivez ces étapes pour configurer l'aperçu des Repères avancés.

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

Avant d'utiliser l'aperçu des Repères avancés, vous avez besoin 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 le cloud. Définissez le type de carte sur JavaScript, puis sélectionnez l'option Vecteur ou Trame.

Créer un ID de carte vectorielle

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.

Utilisez v=beta et libraries=marker dans votre tag script d'API. Exemple :

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=marker&callback=initMap"></script>

Indiquez un ID 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'
});
```

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 ou si un ID non valide est transmis, 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. Il indique si les conditions suivantes sont remplies :

Un ID de carte valide est utilisé.
Si des éléments géographiques nécessitent une carte vectorielle, l'ID est associé à une carte de ce type.

Utiliser des fonctionnalités de la carte est facultatif et n'est recommandé qu'à des fins de test et de dépannage ou de remplacement pour l'exécution.

// 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