Passer aux repères avancés

Depuis le 21 février 2024 (v3.56), google.maps.Marker est obsolète. Nous vous encourageons à passer à la nouvelle classe google.maps.marker.AdvancedMarkerElement. Les repères avancés offrent d'importantes améliorations par rapport à l'ancienne classe google.maps.Marker.

En savoir plus sur l'abandon de cette API

Pour transformer un ancien repère en repère avancé :

  1. Ajoutez le code qui permet d'importer la bibliothèque de repères. Notez que cette exigence ne s'applique pas à la version précédente des repères (google.maps.Marker).
  2. Remplacez google.maps.Marker par google.maps.marker.AdvancedMarkerElement.
  3. Ajoutez un ID de carte à votre code d'initialisation de la carte Par exemple, mapId: 'DEMO_MAP_ID' à des fins de test si vous ne disposez pas encore d'un ID de carte.

Ajouter la bibliothèque de repères avancés

La méthode utilisée pour charger les bibliothèques dépend de la façon dont votre page Web charge l'API Maps JavaScript.

  • Si votre page Web utilise le chargement de script dynamique, ajoutez la bibliothèque de repères, puis importez AdvancedMarkerElement (et PinElement si vous le souhaitez) au moment de l'exécution, comme illustré ici.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Si votre page Web utilise l'ancienne balise de chargement de script en direct, ajoutez libraries=marker au script de chargement, comme illustré dans l'extrait suivant.

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

Découvrez comment charger l'API Maps JavaScript.

Exemples

Les exemples suivants montrent le code utilisé pour ajouter un ancien repère, suivi du code pour le même exemple avec des repères avancés :

Avant la migration

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Après la migration

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

Examiner les fonctionnalités des repères avancés

Vous pouvez personnaliser les repères avancés en profitant de nouvelles options. Vous pouvez désormais ajuster la taille (échelle) des repères, et modifier la couleur de l'arrière-plan, de la bordure et du glyphe. Les images graphiques personnalisées sont plus simples à utiliser, et vous pouvez désormais créer des repères personnalisés en HTML et CSS. Découvrez tout ce que vous pouvez faire avec des repères avancés :