Per iniziare

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

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.

Ottenere una chiave API

Crea 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 Vettore o Opzione Raster.

Importante: per i test, puoi saltare il passaggio di creazione e configurazione 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 crei un'istanza della mappa 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 un codice di esempio, consiglia di sostituire questi ID mappa con DEMO_MAP_ID o con il tuo ID mappa.

(Facoltativo) Controlla le funzionalità della mappa

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