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

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 (you'll need to search for the word 'resize'): http://code.google.com/apis/maps/documentation/v3/reference.html#event

---

Update

This answer has been here a long time, so a little demo might be worthwhile & although it uses jQuery, there's no real need to do so.

$(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 & trigger Google Maps to update too   $(window).resize(function() {     // (the 'map' here is the result of the created 'var map = ...' above)     google.maps.event.trigger(map, "resize");   }); });

html, body {   height: 100%; } #map-canvas {   min-width: 200px;   width: 50%;   min-height: 200px;   height: 80%;   border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script> Google Maps resize demo <div id="map-canvas"></div>

UPDATE 2018-05-22

With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.

The documentation states

When the map is resized, the map center is fixed

• The full-screen control now preserves center.

• There is no longer any need to trigger the resize event manually.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); doesn't have any effect starting from version 3.32

Answer 2

If you're using Google Maps v2, call checkResize() on your map after resizing the container. link

UPDATE

Google Maps JavaScript API v2 was deprecated in 2011. It is not available anymore.