Avviso di sicurezza. Siamo venuti a conoscenza di un problema di sicurezza che potrebbe interessare i siti web che utilizzano librerie specifiche di terze parti (incluso polyfill.io). Questo problema a volte può reindirizzare i visitatori fuori dal sito web previsto senza che il proprietario del sito ne sia a conoscenza o senza autorizzazione. Molti dei nostri esempi JavaScript includevano in precedenza una dichiarazione dello script polyfill.io. L'abbiamo rimosso dai nostri campioni. Se hai utilizzato i nostri esempi JavaScript contenenti questa dichiarazione, ti consigliamo di rimuovere la dichiarazione.

Questa pagina è stata tradotta dall'API Cloud Translation.

Inizia

Seleziona la piattaforma: Android iOS JavaScript

Segui questi passaggi per iniziare a utilizzare gli indicatori avanzati.

Ottieni una chiave API e attiva l'API Maps JavaScript

Prima di utilizzare gli indicatori avanzati, devi avere un progetto Cloud con un account di fatturazione e l'API JavaScript di Maps attivata. Per saperne di più, vedi Configurare il progetto Google Cloud.

Ottieni una chiave API

Creare un ID mappa

Per creare un nuovo ID mappa, segui i passaggi descritti in Personalizzazione di Cloud. Imposta il tipo di mappa su JavaScript e seleziona Vettore o Opzione Raster.

Crea ID mappa vettoriale

Aggiorna il codice di inizializzazione della mappa

Per farlo, devi avere l'ID mappa appena creato. È disponibile su Maps Gestione.

Carica l'API Maps JavaScript.

Carica la raccolta degli indicatori avanzati dall'interno di un async funzione quando necessario:

const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

Fornisci un ID mappa quando ne esegui l'inizializzazione utilizzando la proprietà mapId. Può essere un ID mappa fornito da te o DEMO_MAP_ID.

const map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'YOUR_MAP_ID'
});

(Facoltativo) Controlla le funzionalità della mappa

Gli indicatori avanzati richiedono un ID mappa. Se l'ID mappa non è presente, gli indicatori avanzati non possono essere caricati. Come passaggio per la risoluzione dei problemi, puoi aggiungere un ascoltatore mapcapabilities_changed per iscriverti alle modifiche delle funzionalità della mappa. L'utilizzo delle funzionalità mappa è facoltativo e consigliato solo per i test per la risoluzione dei problemi o per il fallback di runtime.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Passaggi successivi

Creare un indicatore avanzato predefinito