Panoramica degli indicatori

Utilizza gli indicatori per mostrare singole località su una mappa. Questa guida mostra come utilizzare gli indicatori avanzati. Con gli indicatori avanzati puoi creare e personalizzare indicatori dalle prestazioni elevate e renderli accessibili in modo che rispondano agli eventi gmp-click e all'input da tastiera. Per una personalizzazione ancora più approfondita, gli indicatori avanzati supportano l'utilizzo 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 sulle mappe raster che su quelle vettoriali (anche se alcune funzionalità non sono disponibili sulle mappe raster). Per utilizzare gli indicatori avanzati è necessario un ID mappa (puoi utilizzare DEMO_MAP_ID).

Inizia 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 regola le dimensioni dell'indicatore.

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

Creare indicatori HTML personalizzati

Utilizza HTML e CSS personalizzati per creare indicatori interattivi visivamente distintivi e creare animazioni.

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

Fai in modo che un indicatore risponda agli eventi di clic e tastiera aggiungendo un listener di eventi gmp-click.

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.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

Impostare l'altitudine e il comportamento della sovrapposizione dell'indicatore

Imposta l'altitudine di un indicatore in modo che venga visualizzato correttamente con gli elementi della mappa 3D e specifica il comportamento di un indicatore quando entra in collisione con un altro indicatore o con l'etichetta della mappa. L'altitudine dell'indicatore è supportata solo sulle mappe vettoriali.

Passaggio successivo

• Inizia a utilizzare gli indicatori avanzati