Segui questi passaggi per utilizzare gli indicatori avanzati.
Ottieni una chiave API e attiva l'API Maps JavaScript
Prima di utilizzare indicatori avanzati, devi avere un progetto Cloud con un account di fatturazione e l'API Maps JavaScript abilitata. Per saperne di più, consulta Configurare il progetto Google Cloud.
Crea un ID mappa
Per creare un nuovo ID mappa, segui i passaggi nella personalizzazione di Cloud. Imposta il tipo di mappa su JavaScript e seleziona l'opzione Vettoriale o Raster.
Aggiorna il codice di inizializzazione della mappa
Richiede l'ID mappa appena creato. Puoi trovarlo nella pagina Gestione di Maps.
Carica la libreria di indicatori avanzati da una funzione
async
quando necessario:const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
Fornisci un ID mappa quando crei un'istanza della mappa 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' });
(Facoltativo) Verifica le funzionalità della mappa
Gli indicatori avanzati richiedono un ID mappa. Se manca l'ID mappa,
gli indicatori avanzati non possono essere caricati. Come passaggio di risoluzione dei problemi,
puoi aggiungere un listener mapcapabilities_changed
per iscriverti alle modifiche delle funzionalità
della mappa. L'utilizzo delle funzionalità di mappa è facoltativo e consigliato solo a scopo di test e risoluzione dei problemi o a 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. } });