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?

score 325 · Answer 1 · edited Jun 20 '20 at 09:12

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

To anyone using goMap, remember that the google map object is available at $.goMap.map — Adam Caviness, Apr 06 '12 at 18:54
See [this answer by Andrew Hedges](http://stackoverflow.com/a/2969091/737393) for a way to implement: — CrazyTim, Jun 20 '12 at 13:42
The map wouldn't resize after calling this, until I wrapped it with a setTimeout. I found that solution [here](https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448) (see comment #46). — Tyler Collier, Jan 15 '15 at 02:30
This answer should be picked considering that v2 is now deprecated. @Tyler Collier this event trigger is to notify the map that it has to repaint itself. It's possible that you are resizing a hidden container, in which case, yes, a zoom out and in would work in a timeout. — Schien, Jan 10 '17 at 03:17

score 27 · Accepted Answer · edited May 22 '18 at 08:22

27

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.

edited May 22 '18 at 08:22

xomena

31,125
6
88
117

answered Apr 13 '09 at 07:36

SingleNegationElimination

151,563
33
264
304

Can you provide a link with this deprecation? I can't find it in the Google Maps documentation. – Diego Alberto Zapata Häntsch Nov 23 '21 at 20:58

italiansoda · Answer 3 · 2015-08-24T15:51:44.590

The popular answer google.maps.event.trigger(map, "resize"); didn't work for me alone.

Here was a trick that assured that the page had loaded and that the map had loaded as well. By setting a listener and listening for the idle state of the map you can then call the event trigger to resize.

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
});

This was my answer that worked for me.

score 1 · Answer 4 · answered Jun 17 '16 at 08:23

This is best it will do the Job done. It will re-size your Map. No need to inspect element anymore to re-size your Map. What it does it will automatically trigger re-size event .

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, 'resize');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

score 0 · Answer 5 · edited Mar 09 '17 at 07:52

First of all, thanks for guiding me and closing this issue. I found a way to fix this issue from your discussions. Yeah, Let's come to the point. The thing is I'm Using GoogleMapHelper v3 helper in CakePHP3. When i tried to open bootstrap modal popup, I got struck with the grey box issue over the map. It's been extended for 2 days. Finally i got a fix over this.

We need to Update the GoogleMapHelper to fix the issue

Need to add the below script in setCenterMap function

google.maps.event.trigger({$id}, \"resize\");

And need the include below code in JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});

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

5 Answers5

Linked