Inizia

Segui questi passaggi per utilizzare gli indicatori avanzati.

Ottieni una chiave API e attiva l'API Maps JavaScript

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

Ottenere una chiave API

Crea un ID mappa

Per creare un nuovo ID mappa, segui i passaggi nella personalizzazione di Cloud. Imposta il tipo di mappa su JavaScript e seleziona l'opzione Vettoriale o Raster.

Aggiorna il codice di inizializzazione della mappa

Richiede l'ID mappa appena creato. Puoi trovarlo nella pagina Gestione di Maps.

1. Carica l'API Maps JavaScript.

2. Carica la libreria di indicatori avanzati da una funzione async quando necessario:

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

3. Fornisci un ID mappa quando crei un'istanza della mappa utilizzando la proprietà mapId. Può essere un ID mappa da te fornito oppure 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) Verifica le funzionalità della mappa

Gli indicatori avanzati richiedono un ID mappa. Se l'ID mappa non è presente o viene trasmesso un ID mappa non valido, gli indicatori avanzati non possono essere caricati. Come passaggio di risoluzione dei problemi, puoi aggiungere un ascoltatore mapcapabilities_changed per iscriverti alle modifiche delle funzionalità della mappa. In questo modo viene indicato se sono state soddisfatte le seguenti condizioni:

• È in uso un ID mappa valido.
• L'ID mappa è associato a una mappa vettoriale, se sono in uso elementi che richiedono una mappa vettoriale.

L'utilizzo delle funzionalità di mappa è facoltativo e consigliato solo a scopo di test e risoluzione dei problemi o a scopi di 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