Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

Per configurare gli indicatori avanzati, segui questi passaggi.

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ù, consulta Configurare il progetto Google Cloud.

Ottenere una chiave API

Creare un ID mappa

Per creare un nuovo ID mappa, segui la procedura descritta in Personalizzazione del cloud. Imposta il tipo di mappa su JavaScript e seleziona Vettore o Opzione Raster.

Importante: per i test, puoi saltare il passaggio di creazione e configurazione di un ID mappa utilizzando mapId: 'DEMO_MAP_ID' nel codice dell'app.

Aggiorna il codice di inizializzazione della mappa

È necessario l'ID mappa che hai appena creato. È disponibile su Maps Gestione.

1. Carica l'API Maps JavaScript.

2. Carica la libreria degli indicatori avanzati da una funzione async se necessario:

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

3. Fornisci un ID mappa quando la 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'
   });

Attenzione: le mappe di esempio per gli indicatori avanzati utilizzano ID mappa collegati a uno stile di mappa con PDI ridotti. Se riutilizzi il codice di esempio, consigliamo di sostituire questi ID mappa con DEMO_MAP_ID o con il tuo ID mappa.

(Facoltativo) Controlla le funzionalità della mappa

Gli indicatori avanzati richiedono un ID mappa. Se manca l'ID mappa: impossibile caricare gli indicatori avanzati. Come passaggio per la risoluzione dei problemi, puoi aggiungere un listener mapcapabilities_changed per iscriverti alla funzionalità di mappa modifiche. 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