How do I resize a Google Map with JavaScript after it has loaded?

Question

I have a 'mapwrap' div set to 400px x 400px and inside that I have a Google 'map' set to 100% x 100%. So the map loads at 400 x 400px, then with JavaScript I resize the 'mapwrap' to 100% x 100% of the screen - the google map resizes to the whole screen as I expected but tiles start disappearing before the right hand edge of the page.

Is there a simple function I can call to cause the Google map to re-adjust to the larger size 'mapwrap' div?

Answer 1

After resizing the container, call checkResize() on your map. link

Answer 2

Here is a solution:

http://www.wolfpil.de/map-in-a-box.html

Answer 3

ResizeControl javascript library: phtagr.org: Resize control PResizeControl for Google maps

Answer 4

for Google Maps v3, you need to trigger the resize event differently:

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

See the documentation for the resize event: http://code.google.com/apis/maps/documentation/v3/reference.html#event