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

El 13 de octubre de 2021, desactivamos el servicio que proporciona el módulo "Maps" para google.load. Esto significa que, a partir del 13 de octubre de 2021, si intentas usar el módulo "Maps" en google.load, recibirás un mensaje de 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 mantener la etiqueta <script> del cargador.

Luego, implementa una nueva forma de cargar la API de Maps JavaScript (selecciona una de las siguientes opciones):

• Carga intercalada mediante la etiqueta <script>
• Carga dinámica desde otro archivo JavaScript

Ejemplo actual de Google Loader

En el siguiente ejemplo, se muestra cómo se usa actualmente 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>

Carga intercalada mediante la etiqueta <script> (recomendado)

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 (consulta la sección "Antes") con 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, ya que no la necesitarás. 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>

Consulta 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 para 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 (consulta la sección "Antes") con 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 de la ventana, 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);

Consulta la documentación.