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.
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.
Aggiorna il codice di inizializzazione della mappa
Per farlo, devi avere l'ID mappa appena creato. Puoi trovarlo nella pagina Gestione Maps.
Carica la libreria degli indicatori avanzati da una funzione
async
se necessario:const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
Fornisci un ID mappa quando la esegui l'inizializzazione utilizzando la proprietà
mapId
. Può essere un ID mappa da te fornito oppureDEMO_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. } });