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'arrêt de cette fonctionnalité

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

  1. Ajoutez le code qui permet d'importer la bibliothèque de repères (voir les étapes ci-dessous).
  2. Remplacez google.maps.Marker par google.maps.marker.AdvancedMarkerElement. Si votre instruction d'importation déclare AdvancedMarker, vous pouvez omettre le chemin qualifié.
  3. Ajoutez un ID de carte à votre code d'initialisation de la carte Par exemple, mapId: 'DEMO_MAP_ID', à utiliser à des fins de test si vous ne disposez pas encore d'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 l'importation dynamique de la bibliothèque, 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

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

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 :