Изменить размер карты Google непрерывно

Question

Я использую Google Map Api v3.Я установил высоту моего div карты с помощью следующего JQuery:

$(document).ready(function() {
   var wHeight = $(document).height();
   var mapHeight = wHeight - 120;
   $("#map_canvas").css('height' , mapHeight);
  });

У меня есть верхний элемент div сверху, поэтому я вычел 120 пикселей и установил высоту холста карты.Это прекрасно работает при загрузке страницы, но я не могу изменить размер карты при изменении размера браузера, он остается прежним.

Я знаю, что в API есть событие изменения размера:

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

Я просто не знаю, как совместить эту строку с вышеупомянутым JQuery для работы.

Спасибо.

Answer 1

Я думаю, что вы можете решить вашу проблему с помощью следующего CSS:

#map_canvas { position: absolute; top: 120px; left: 0; right: 0; bottom:0; z-index: 1; overflow: hidden; }

Answer 2

Использование .resize:

$(window).resize(function() {
  var wHeight = $(document).height();
  var mapHeight = wHeight - 120;
  $("#map_canvas").css('height' , mapHeight);
});