Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

Per configurare gli indicatori avanzati, segui questi passaggi.

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 saperne di più, vedi Configurare il progetto Google Cloud.

Ottieni una chiave API

Creare 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 l'opzione Vettore o Raster.

Creare un ID mappa vettoriale

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 la esegui l'inizializzazione 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'
    });

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