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 de esta fecha, 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 manera de cargar la API de Maps JavaScript (selecciona una de las siguientes opciones):

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

Ejemplo actual con el cargador de Google

En el siguiente ejemplo, se muestra cómo se usa actualmente el cargador de Google 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 con la etiqueta <script> (opción recomendada)

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 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 carga 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 a que el usuario haga clic en un botón o realice otra acción para cargar la API de Maps JavaScript. 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 window, tal 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, como se indica a continuación:

document.head.appendChild(script);

Consulta la documentación.