Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

Per configurare i marcatori avanzati, segui questi passaggi.

Ottieni una chiave API e abilita l'API Maps JavaScript

Prima di utilizzare i marcatori 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 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 Maps Management.

1. Carica l'API Maps JavaScript.

2. Carica la libreria dei marcatori 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 i marcatori 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)

I marcatori avanzati richiedono un ID mappa. Se l'ID mappa non è presente, i marcatori 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