Migrazione: modulo Maps in google.load

Il 13 ottobre 2021 disattiveremo il servizio che fornisce il modulo "Maps" per google.load. Ciò significa che dopo il 13 ottobre 2021, se tenti di utilizzare il modulo "Mappe" in google.load, riceverai un errore (le mappe del modulo non sono supportate) e non verrà caricata nessuna mappa. Per evitare potenziali interruzioni, devi passare a una delle alternative.

Cosa devo fare?

Per prima cosa, rimuovi il tag <script> che carica il caricatore google.load, quindi rimuovi le chiamate a google.load. Se utilizzi Google Loader per altre attività, puoi lasciare il tag <script> caricatore.

Quindi, implementa un nuovo modo per caricare l'API Maps JavaScript (seleziona una delle seguenti opzioni):

Esempio attuale di utilizzo di Google Loader

L'esempio seguente mostra in che modo il componente Google Loader viene attualmente utilizzato per caricare l'API Maps JavaScript (sono presenti due blocchi <script>):

Prima

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Quando viene utilizzato questo approccio, l'API Maps JavaScript viene caricata nello stesso momento in cui viene caricata la pagina. Per implementare il caricamento in linea, sostituisci innanzitutto il tag <script> che carica www.google.com/jsapi ("before") con il tag <script> mostrato nell'esempio seguente:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

Quindi, nel codice JavaScript, rimuovi la chiamata funzione google.load, poiché non è più necessaria. L'esempio seguente mostra una funzione initMap() vuota, che viene richiamata quando la libreria di Maps è stata caricata correttamente:

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Consulta la documentazione

Caricamento dinamico da un altro file JavaScript

Il caricamento dinamico ti consente di controllare quando viene caricata l'API Maps JavaScript. Ad esempio, puoi attendere il caricamento dell'API Maps JavaScript finché l'utente non fa clic su un pulsante o non esegue un'altra azione. Per implementare il caricamento dinamico, devi prima sostituire il tag <script> che carica www.google.com/jsapi ("before") con il codice per aggiungere in modo programmatico il tag <script>, come mostrato nell'esempio seguente:

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

Quindi associa la tua funzione di callback all'oggetto finestra in questo modo:

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

Infine, aggiungi il tag <script> all'intestazione della pagina in questo modo:

document.head.appendChild(script);

Consulta la documentazione