Resize google map continouosly

I'm using Google Map Api v3. I set my map div's height with the following JQuery:

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

I have a top bar 开发者_开发知识库div at the top, that's why I subtract 120 pixel and set the map canvas height. This works fine on page load but I can't get the map to resize when I resize the browser, it stays the same.

I know that there is a resize event in the API:

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

I just don't know how to combine that line with the above JQuery to work.

Thanks.

I think you can solve your problem with the following CSS:

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

Use .resize:

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