Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

Segui questi passaggi per configurare gli indicatori avanzati.

Ottieni una chiave API e abilita l'API Maps JavaScript

Prima di utilizzare gli 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.

Ottieni una chiave API

Crea un ID mappa

Per creare un nuovo ID mappa, segui i passaggi descritti in Personalizzazione del cloud. Imposta Tipo di mappa su JavaScript e seleziona l'opzione Vettoriale 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 questa operazione è necessario l'ID mappa che hai appena creato. Puoi trovarlo nella pagina Maps Management.

1. Carica l'API Maps JavaScript.

2. Carica la libreria degli 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ò trattarsi di un ID mappa che fornisci tu o di 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 punti di interesse ridotti. Se riutilizzi il codice di esempio, ti consigliamo di sostituire questi ID mappa con DEMO_MAP_ID o con il tuo ID mappa.

Controlla 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 listener mapcapabilities_changed per ricevere una notifica delle modifiche alle funzionalità della mappa. L'utilizzo delle funzionalità della mappa è facoltativo ed è consigliato solo per scopi di test e risoluzione dei problemi o per il fallback del 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

Aggiungi un indicatore a una mappa