Keep Google Map v3 centered when browser is resized

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);
});
0 0 vote
Article Rating
Subscribe
Notify of
guest
23 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
????? ??????
????? ??????
3 years ago

Thank you!!!!

Rija
Rija
3 years ago

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
James Peck
5 years ago

Thank you

James Peck
James Peck
5 years ago

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

statvoo
statvoo
5 years ago
Reply to  James Peck

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

dragonflo
dragonflo
5 years ago

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

statvoo
statvoo
5 years ago
Reply to  dragonflo

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

Alan
Alan
5 years ago

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

Ernesto
Ernesto
6 years ago

Thanks a lot!

filsmick
filsmick
7 years ago

Excellent! Simple and clear. Thank you very much for this snippet.

Rob Huska
Rob Huska
7 years ago

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
mrzpro
7 years ago

Sorry but the code doesn’ t show the body

mrzpro
mrzpro
7 years ago
Reply to  mrzpro

the body has the div open and closed of

mrzpro
mrzpro
7 years ago
Reply to  mrzpro

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

mrzpro
mrzpro
7 years ago

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
7 years ago

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

Kemal Ersz
7 years ago

That works, thank you 🙂

Julie
Julie
7 years ago

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

Walter
Walter
7 years ago

Nice code! Works like a charm!

Ricvk
Ricvk
7 years ago

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

Fluid
Fluid
7 years ago

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

Skweekah
Skweekah
7 years ago

THANKYOU! Worked a treat for me!