Présentation

Les repères avancés vous permettent de créer et de personnaliser des repères très performants, et présentent de nouvelles fonctionnalités. Avec les repères avancés, vous pouvez personnaliser la couleur de l'arrière-plan, de la bordure et du glyphe du repère par défaut, en ajuster la taille et remplacer son icône par une image de votre choix. Vous pouvez créer des repères accessibles qui répondent aux événements de clic DOM et à la saisie au clavier. Pour une personnalisation encore plus poussée, les repères avancés sont compatibles avec le code HTML et CSS personnalisé, ce qui vous permet de créer des repères entièrement personnalisés. Pour les applications 3D, vous pouvez contrôler l'altitude à laquelle un repère apparaît. Les repères avancés sont compatibles avec les cartes matricielles et vectorielles (un ID de carte est requis).

Premiers pas avec les repères avancés

Personnaliser la couleur, la taille et l'icône

Personnalisez la couleur de l'arrière-plan, du glyphe et de la bordure du repère par défaut, puis ajustez-en la taille.

Capture d'écran montrant quelques repères personnalisés.

Remplacez l'icône par défaut du repère par une image SVG ou PNG personnalisée.

Capture d'écran montrant des repères SVG personnalisés.

Créer des repères HTML personnalisés

Utilisez du code HTML et CSS personnalisé pour créer des repères interactifs qui se démarquent, ainsi que des animations.

Capture d'écran montrant un repère HTML personnalisé.

Configurer les repères pour qu'ils répondent aux événements de clic et de clavier

Ajoutez un écouteur d'événements click pour que le repère puisse répondre aux événements de clic et de clavier.

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  markerView.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

Définir l'altitude du repère et le comportement en cas de collision

Définissez l'altitude d'un repère pour qu'il s'affiche correctement avec les éléments de la carte en 3D. Précisez aussi comment le repère doit se comporter en cas de collision avec un autre repère ou libellé de carte. L'altitude du repère n'est compatible qu'avec les cartes vectorielles.

Capture d'écran montrant un repère dont l'altitude a été ajustée.

Étape suivante