Panoramica

Seleziona la piattaforma: Android iOS JavaScript

Con gli indicatori avanzati puoi creare e personalizzare indicatori ad alte prestazioni. Personalizza lo sfondo, il bordo e il colore glifo dell'indicatore predefinito, regola le dimensioni dell'indicatore e sostituisci l'icona predefinita con un'immagine grafica personalizzata. Puoi 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 HTML e CSS personalizzati, compresa 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 sulle mappe raster e vettoriali (è richiesto un ID mappa).

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.

Uno screenshot che mostra alcuni indicatori personalizzati.

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

Uno screenshot che mostra gli indicatori SVG personalizzati.

Crea indicatori HTML personalizzati

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

Uno screenshot che mostra un indicatore HTML personalizzato.

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.

Uno screenshot che mostra un indicatore di altitudine regolata.

Passaggio successivo