Esegui la migrazione agli indicatori avanzati

A partire dal 21 febbraio 2024 (v3.56), google.maps.Marker verrà ritirato. Me ti invitiamo a passare al nuovo google.maps.marker.AdvancedMarkerElement . Gli indicatori avanzati offrono miglioramenti sostanziali rispetto alla versione precedente google.maps.Marker corso.

Scopri di più su questo ritiro

Per aggiornare un indicatore precedente in modo che diventi un indicatore avanzato, procedi nel seguente modo:

  1. Aggiungi il codice per importare la libreria di indicatori. Tieni presente che la versione precedente gli indicatori (google.maps.Marker) non hanno questo requisito.
  2. Cambia google.maps.Marker in google.maps.marker.AdvancedMarkerElement
  3. Aggiungi un ID mappa al codice di inizializzazione della mappa. Ad esempio: mapId: 'DEMO_MAP_ID' a scopo di test se non hai una mappa ID già esistente.

Aggiungere la libreria di indicatori avanzati

Il metodo utilizzato per caricare le librerie dipende dal modo in cui la pagina web carica API Maps JavaScript.

  • Se la tua pagina web utilizza il caricamento degli script dinamici, aggiungi la libreria degli indicatori e importa AdvancedMarkerElement (e PinElement facoltativamente) in fase di runtime, come come mostrato qui.

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

  • Se la tua pagina web utilizza il tag precedente di caricamento dello script diretto, 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 da il codice per lo stesso esempio utilizzando gli 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 impensabili in precedenza. Ora puoi regolare le dimensioni (scala) degli indicatori e modificare i colori sfondo, bordo e glifo. È più facile lavorare con le immagini grafiche personalizzate, e ora è possibile comporre indicatori personalizzati utilizzando HTML e CSS. Scopri di più su tutto quello che puoi fare con gli indicatori avanzati: