Cambiar el tamaño de un mapa de Google con JavaScript

Encontraste un problema por el cual los mosaicos de Google desaparecen después de cambiar el tamaño de un div "mapwrap" que contiene un mapa. Este artículo tiene como objetivo brindar una solución a este problema al analizar la función adecuada para activar un ajuste del mapa de Google.

¿Por qué desaparecen los mosaicos?

Cuando cambia el tamaño del " mapwrap" div, el mapa de Google no se ajusta automáticamente al nuevo tamaño. Esto da como resultado una falta de coincidencia entre las dimensiones del mapa y el área de visualización, lo que hace que los mosaicos desaparezcan.

Solución

Para solucionar este problema, debe activar explícitamente el evento de cambio de tamaño en el objeto del mapa de Google. Esto le indica al mapa que recalcule su diseño y se ajuste a las nuevas dimensiones de la división "mapwrap".

Para Google Maps v3, use esta función:

google.maps.event.trigger(map, "resize");

Demostración

Para aclarar este concepto, aquí hay una demostración usando jQuery:

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for the window resize event and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

Este ejemplo garantiza que cada vez que la ventana cambie de tamaño, el mapa de Google dentro del div "map-lienzo" se ajustará automáticamente al nuevo tamaño, evitando que los mosaicos desaparezcan.