Redimensionando um mapa do Google com JavaScript

Você encontrou um problema em que os blocos do Google desaparecem após redimensionar uma div "mapwrap" contendo um Google mapa. Este artigo tem como objetivo fornecer uma solução para esse problema, discutindo a função apropriada para acionar um ajuste de mapa do Google.

Por que os blocos desaparecem?

Quando você redimensiona o " mapwrap" div, o mapa do Google não se ajusta automaticamente ao novo tamanho. Isso resulta em uma incompatibilidade entre as dimensões do mapa e a área de exibição, fazendo com que os blocos desapareçam.

Solução

Para corrigir isso, você precisa acionar explicitamente o evento de redimensionamento no objeto do mapa do Google. Isso instrui o mapa a recalcular seu layout e ajustar-se às novas dimensões da div "mapwrap".

Para o Google Maps v3, use esta função:

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

Demonstração

Para esclarecer isso conceito, aqui está uma demonstração 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 exemplo garante que sempre que a janela for redimensionada, o mapa do Google dentro da div "map-canvas" se ajustará automaticamente ao novo tamanho, evitando que os blocos desapareçam.