Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

Segui questi passaggi per configurare i marcatori avanzati.

Recuperare una chiave API e attivare l'API Maps JavaScript

Prima di utilizzare i marcatori avanzati, devi disporre di un progetto Cloud con un account di fatturazione e dell'API Maps JavaScript abilitata. Per saperne di più, vedi Configurare il progetto Google Cloud.

Recuperare una chiave API

Crea un ID mappa

Per creare un nuovo ID mappa, segui i passaggi descritti in Personalizzazione del cloud. Imposta il 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 appena creato. Puoi trovarlo nella pagina Gestione di Maps.

1. Carica l'API Maps JavaScript.

2. Carica la libreria dei marcatori avanzati dall'interno di una funzione async quando necessario:

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

3. Fornisci un ID mappa quando la istanzi utilizzando la proprietà mapId. Può trattarsi di un ID mappa che fornisci 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 i marcatori avanzati utilizzano ID mappa collegati a uno stile di mappa con un numero ridotto di PDI. 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 listener mapcapabilities_changed per abbonarti alle modifiche delle funzionalità della mappa. L'utilizzo delle funzionalità di Maps è facoltativo e consigliato solo per test e risoluzione dei problemi o per scopi di fallback in fase 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