Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

Segui questi passaggi per configurare gli indicatori avanzati.

Ottieni una chiave API e abilita l'API Maps JavaScript

Prima di utilizzare gli indicatori avanzati, devi avere un progetto Cloud con un account di fatturazione e l'API Maps JavaScript abilitata. Per saperne di più, consulta Configura il progetto Google Cloud.

Ottieni una chiave API

Crea un ID mappa

Per creare un nuovo ID mappa, segui i passaggi descritti in Personalizzazione Cloud. Imposta il tipo di mappa su JavaScript e seleziona l'opzione Vettoriale o Raster.

Crea ID mappa vettoriale

Aggiorna il codice di inizializzazione della mappa

Per farlo, è necessario l'ID mappa che hai appena creato. Puoi trovarlo nella pagina Gestione delle mappe.

  1. Carica l'API Maps JavaScript.

  2. Carica la libreria di indicatori 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ò 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'
});

Controlla 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 iscriverti alle modifiche delle funzionalità della mappa. L'utilizzo delle funzionalità di Maps è facoltativo ed è consigliato solo per scopi di test e risoluzione dei problemi o per scopi di 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

Aggiungi un indicatore a una mappa