Eseguire la migrazione agli indicatori avanzati

A partire dal 21 febbraio 2024 (v3.56), google.maps.Marker verrà ritirato. Ti consigliamo di eseguire la transizione alla nuova classe google.maps.marker.AdvancedMarkerElement. Gli indicatori avanzati offrono miglioramenti sostanziali rispetto alla classe google.maps.Marker legacy. Scopri di più su questo ritiro

Per aggiornare un indicatore legacy in modo che diventi un indicatore avanzato:

  1. Aggiungi il codice per importare la libreria degli indicatori (vedi i passaggi di seguito).
  2. Modifica google.maps.Marker in google.maps.marker.AdvancedMarkerElement; se l'istruzione di importazione dichiara AdvancedMarker, puoi omettere il percorso qualificato
  3. Aggiungi un ID mappa al codice di inizializzazione della mappa. Ad esempio mapId: 'DEMO_MAP_ID' a scopo di test se non hai già un ID mappa.

Aggiungere la libreria degli indicatori avanzati

Il metodo utilizzato per caricare le librerie dipende da come la pagina web carica l'API Maps JavaScript.

  • Se la pagina web utilizza l'importazione dinamica delle librerie, aggiungi la libreria degli indicatori e importa AdvancedMarkerElement (e, facoltativamente, PinElement) in fase di runtime, come mostrato qui.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Se la pagina web utilizza il tag di caricamento dello script diretto legacy, aggiungi libraries=marker allo script di caricamento, come mostrato nel seguente snippet.

    <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 legacy, seguito dal codice per lo stesso esempio che utilizza 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

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// 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/Ayers Rock',
});

Esplorare le funzionalità degli indicatori avanzati

Gli indicatori avanzati possono essere personalizzati in modi che prima 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 ed è ora possibile comporre indicatori personalizzati utilizzando HTML e CSS. Scopri di più su tutto ciò che puoi fare con gli indicatori avanzati: