Using Google Maps V3 Javascript API you can keep the map centered to the browser’s window by using the following trick when resizing the window.

var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(0,0), mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

// this is our gem
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});

22 Comments

????? ?????? · December 8, 2016 at 09:55

Thank you!!!!

Rija · December 3, 2016 at 19:17

Fantastic! You can re-center the map on a specific point if moved by supplying coordinates on var center instead of map.getCenter().

James Peck · October 20, 2015 at 11:06

Thank you

James Peck · October 20, 2015 at 06:44

Hi. Where do you ‘put’ the code please? Thank you

    statvoo · October 20, 2015 at 10:53

    Around where you usually declare your ‘map’ variable in your javascript code.

dragonflo · August 29, 2015 at 20:42

Thank you, works great. A lot of incomplete answers on stackoverflow.

    statvoo · August 30, 2015 at 12:07

    No problem, this is quite a simple solution that works well.

Alan · February 4, 2015 at 17:00

Thanks for this. Works perfectly. That’s saved me trawling the web looking for the answer!

Ernesto · December 6, 2013 at 22:53

Thanks a lot!

Rob Huska · September 4, 2013 at 15:44

Thank You! This is exactly what I have been trying to do. I was tooling with so much more than needed such as, getCenter on resize and getCenter on center_changed, but the problem was that the center was being reset on resize too so when ever i would resize, a new value for center was set and then that value was set as the center position, essentially doing nothing, just causing a stupid loop!

mrzpro · August 31, 2013 at 02:56

Sorry but the code doesn’ t show the body

    mrzpro · August 31, 2013 at 02:57

    the body has the div open and closed of

      mrzpro · August 31, 2013 at 02:59

      div id=”map_canvas” and closure /div
      sorry but I’m not a good user

mrzpro · August 31, 2013 at 02:53

Dear all, I’ve tried to use the above code but I’ve done everything to obtain nothing. Following code is the last I’ve tried with no result:

Documento senza titolo

var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

// this is our gem
google.maps.event.addDomListener(window, 'resize', function() {
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

Please help me to understand where it’ swrong
thank you

Flemming · August 20, 2013 at 11:51

Yep, this worked a treat, thanks for posting it!

Kemal Ersöz · July 2, 2013 at 18:10

That works, thank you 🙂

Julie · June 22, 2013 at 13:02

Brilliant. Spent hours on this trying with my limited JS skills. Thanks!!!

Walter · June 16, 2013 at 11:11

Nice code! Works like a charm!

Ricvk · May 21, 2013 at 09:13

Excellent piece of code. Thanks heaps. It worked perfectly!

Fluid · May 3, 2013 at 15:53

Brilliant! Works like a charm!! Thank you!!!

Skweekah · April 17, 2013 at 03:34

THANKYOU! Worked a treat for me!

Leave a Reply

Your email address will not be published. Required fields are marked *