Inizia

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 scoprire 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 l'opzione Vettore o 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

Per farlo, devi avere l'ID mappa appena creato. Puoi trovarlo nella pagina Gestione Maps.

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, ti consigliamo di sostituire questi ID mappa con DEMO_MAP_ID o con il tuo ID mappa.

Controllare le funzionalità della mappa (facoltativo)

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à di mappatura è facoltativo e consigliato solo per scopi di test e risoluzione dei problemi o per il fallback in fase di esecuzione.

// 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