Utilizza gli indicatori per visualizzare singole sedi su una mappa. Questa guida mostra come
utilizzare gli indicatori avanzati. Con gli indicatori avanzati puoi creare e personalizzare indicatori ad alte prestazioni e creare indicatori accessibili che rispondono agli eventi di clic del DOM e all'input da tastiera. Per una personalizzazione ancora più approfondita, gli indicatori avanzati supportano l'utilizzo di codice HTML e CSS personalizzato, 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 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).
Iniziare a utilizzare gli indicatori avanzati
Personalizza colore, scala e 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
Usa 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
ascoltatore di eventi 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.addListener('click', ({domEvent, latLng}) => {
const {target} = domEvent;
// Handle the click event.
// ...
});
}
Imposta il comportamento dell'altitudine e della collisione degli indicatori
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 si scontra con un altro indicatore o un'altra etichetta della mappa. L'altitudine dell'indicatore è supportata solo sulle mappe vettoriali.
