Изменение размера карты Google с помощью JavaScript

Вы столкнулись с проблемой, при которой плитки Google исчезают после изменения размера элемента div «mapwrap», содержащего Google карта. Целью этой статьи является решение этой проблемы путем обсуждения соответствующей функции, запускающей корректировку карты Google.

Почему плитки исчезают?

При изменении размера " mapwrap" div, карта Google не подстраивается под новый размер автоматически. Это приводит к несоответствию размеров карты и области отображения, в результате чего плитки исчезают.

Решение

Чтобы это исправить, необходимо явно вызвать событие изменения размера на объекте карты Google. Это предписывает карте пересчитать макет и адаптироваться к новым размерам элемента div "mapwrap".

Для Google Maps v3 используйте эту функцию:

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

Демонстрация

Чтобы прояснить эту концепцию, вот демонстрация с использованием 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");
  });
});

Этот пример гарантирует, что при изменении размера окна карта Google в div «map-canvas» будет автоматически подстраиваться под новый размер, предотвращая исчезновение плиток.