Inizia

Seleziona la piattaforma: Android iOS JavaScript

Segui questi passaggi per iniziare a utilizzare gli indicatori avanzati.

Ottieni una chiave API e attiva l'API Maps JavaScript

Per utilizzare gli indicatori avanzati, è necessario disporre di un progetto con un account di fatturazione e l'API Maps JavaScript in un bucket in cui è abilitato il controllo delle versioni. Per saperne di più, consulta Configurare il progetto Google Cloud.

Ottenere una chiave API

Crea 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.

Crea ID mappa vettoriale

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 raccolta degli indicatori avanzati dall'interno di un async funzione 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ò essere un ID mappa da te fornito oppure 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'
    });

(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