A partire dal 21 febbraio 2024 (v3.56), google.maps.Marker è stato ritirato. Ti invitiamo a passare alla nuova lezione google.maps.marker.AdvancedMarkerElement
. Gli indicatori avanzati offrono miglioramenti sostanziali rispetto alla classe google.maps.Marker
precedente.
Scopri di più su questo ritiro
Per aggiornare un indicatore precedente in modo che diventi un indicatore avanzato:
- Aggiungi codice per importare la libreria di indicatori. Tieni presente che la versione precedente degli indicatori (
google.maps.Marker
) non prevede questo requisito. - Cambia
google.maps.Marker
ingoogle.maps.marker.AdvancedMarkerElement
- Aggiungi un ID mappa al codice di inizializzazione della mappa. Ad esempio
mapId: 'DEMO_MAP_ID'
. Puoi utilizzare "DEMO_MAP_ID" se non hai già un ID mappa.
Aggiungi la libreria di indicatori avanzati
Il metodo da utilizzare per caricare le librerie dipende dal modo in cui la pagina web carica l'API Maps JavaScript.
Se la tua pagina web utilizza il caricamento degli script dinamici, aggiungi la libreria di indicatori e importa
AdvancedMarkerElement
(e facoltativamentePinElement
) in fase di runtime, come mostrato qui.const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
Se la tua pagina web utilizza il tag di caricamento dello script diretto precedente, aggiungi
libraries=marker
allo script di caricamento, come mostrato nello snippet seguente.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>
Scopri di più sul caricamento dell'API Maps JavaScript
Esempi
I seguenti esempi di codice mostrano il codice per l'aggiunta di un indicatore precedente, seguito dal codice per lo stesso esempio utilizzando indicatori avanzati:
Prima della migrazione
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: position, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ map: map, position: position, title: 'Uluru', });
Dopo la migrazione
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers. }); // The advanced marker, positioned at Uluru const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: position, title: 'Uluru', });
Esplora le funzioni avanzate degli indicatori
Gli indicatori avanzati possono essere personalizzati in modi che in precedenza non erano possibili. Ora puoi regolare le dimensioni (scala) degli indicatori e modificare i colori dello sfondo, del bordo e del glifo. Le immagini grafiche personalizzate sono più semplici da utilizzare e ora è possibile comporre indicatori personalizzati con HTML e CSS. Scopri di più su tutto ciò che puoi fare con gli indicatori avanzati: