Migración: módulo de Maps en google.load

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

El 13 de octubre de 2021, desactivaremos el servicio que proporciona el módulo de Maps para google.load. Esto significa que, después del 13 de octubre de 2021, si intentas usar el módulo de "Maps" en google.load, recibirás un error (no se admite el módulo "maps") y no se cargará ningún mapa. Para ayudarte a evitar posibles fallas, debes cambiar a una de las alternativas.

¿Qué tengo que hacer?

Primero, quita la etiqueta <script> que carga el cargador google.load y, luego, las llamadas a google.load. Si usas Google Loader para otros fines, puedes dejar la etiqueta <script> del cargador en su lugar.

A continuación, implementa una forma nueva de cargar la API de Maps JavaScript (selecciona una de las siguientes opciones):

Ejemplo actual con Google Loader

En el siguiente ejemplo, se muestra cómo se usa Google Loader para cargar la API de Maps JavaScript (hay dos bloques <script>):

Antes

<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>

Cuando se usa este enfoque, la API de Maps JavaScript se carga al mismo tiempo que la página. Para implementar la carga intercalada, primero reemplaza la etiqueta <script> que carga www.google.com/jsapi ("before") por la etiqueta <script> que se muestra en el siguiente ejemplo:

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

Luego, en tu código JavaScript, quita la llamada a la función google.load, puesto que ya no es necesaria. En el siguiente ejemplo, se muestra una función initMap() en blanco, a la que se llama cuando la biblioteca de Maps se cargó correctamente:

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

Ver la documentación

Carga dinámica desde otro archivo JavaScript

La carga dinámica te permite controlar cuándo se carga la API de Maps JavaScript. Por ejemplo, puedes esperar a cargar la API de Maps JavaScript hasta que el usuario haga clic en un botón o realice otra acción. Para implementar la carga dinámica, primero reemplaza la etiqueta <script> que carga www.google.com/jsapi ("before") con el código para agregar de manera programática la etiqueta <script>, como se muestra en el siguiente ejemplo:

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;

Luego, adjunta tu función de devolución de llamada al objeto window como se muestra a continuación:

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

Por último, agrega la etiqueta <script> al encabezado de la página de la siguiente manera:

document.head.appendChild(script);

Ver la documentación