Panoramica degli indicatori

Seleziona la piattaforma: Android iOS JavaScript

Utilizza gli indicatori per visualizzare 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 creare indicatori accessibili che rispondono agli eventi gmp-click 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 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 (è possibile utilizzare DEMO_MAP_ID).

Suggerimento: se la tua mappa utilizza indicatori legacy, valuta la possibilità di eseguire la migrazione agli indicatori avanzati.

Inizia a utilizzare gli indicatori avanzati

Personalizza 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.

Crea indicatori HTML personalizzati

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

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

Fai in modo che un indicatore risponda ai clic e agli eventi della 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.
    // ...
  });
}

Imposta l'altitudine e il comportamento della sovrapposizione dei marker

Imposta l'altitudine di un indicatore per visualizzarlo correttamente con gli elementi della mappa 3D e specifica come deve comportarsi un indicatore quando entra in collisione con un altro indicatore o un'etichetta della mappa. L'altitudine dell'indicatore è supportata solo sulle mappe vettoriali.

Passaggio successivo

• Inizia a utilizzare gli indicatori avanzati