Panoramica degli indicatori

Utilizza gli indicatori per visualizzare singole località su una mappa. Questa guida spiega come utilizzare gli indicatori avanzati. Con gli indicatori avanzati puoi creare e personalizzare indicatori dalle prestazioni elevate e indicatori accessibili che rispondono agli eventi di clic DOM e all'input da tastiera. Per una personalizzazione ancora più profonda, gli indicatori avanzati supportano l'uso di HTML e CSS personalizzati, inclusa la possibilità di creare indicatori completamente personalizzati. Per le applicazioni 3D, puoi controllare l'altitudine a cui viene visualizzato un indicatore. Gli indicatori avanzati sono supportati sia nelle mappe raster che in quelle vettoriali (anche se alcune funzionalità non sono disponibili nelle mappe raster). Per utilizzare gli indicatori avanzati è necessario un ID mappa (è possibile utilizzare DEMO_MAP_ID).

Iniziare a utilizzare gli indicatori avanzati

Personalizzare il colore, la scala e l'immagine dell'icona

Personalizza lo sfondo, il glifo e il colore del bordo dell'indicatore predefinito e regolane le dimensioni.

Sostituisci l'icona predefinita dell'indicatore con un'immagine SVG o PNG personalizzata.

Crea indicatori HTML personalizzati

Utilizza HTML e CSS personalizzati per creare indicatori interattivi visualmente distinti e animazioni.

Fare in modo che gli indicatori rispondano agli eventi di clic e tastiera

Fai in modo che un indicatore risponda a clic ed eventi della tastiera aggiungendo un click listener di eventi.

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 marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

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

Impostare l'altitudine dell'indicatore e il comportamento in caso di collisione

Imposta l'altitudine di un indicatore per visualizzarlo correttamente con gli elementi della mappa 3D e specifica il comportamento di un indicatore quando entra in collisione con un altro indicatore o un'etichetta della mappa. L'altitudine degli indicatori è supportata solo nelle mappe vettoriali.

Passaggio successivo

• Iniziare a utilizzare gli indicatori avanzati