Center Google Maps (V3) on browser resize (responsive)

Question

I have a Google Maps (V3) in my page at 100% page width with one marker in the middle. When I resize my browser window's width I would like the map to stay centered (responsive). Now the map just stays at the left side of the page and gets smaller.

UPDATE Got it to work exactly as described thanks to duncan. This is the final code:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

good job! yes you have to continuously output the current center value to global scope so it can be picked up by the dom listener — ericjam, Jan 04 '13 at 23:12
If you are going top do it this way, then `center` does not need to be global. Providing `center` (and `calculateCenter`) are in the same scope as `map`, then everything should work. Of course, if `map` is global then you'll need to fix that too :) — Roamer-1888, Apr 16 '14 at 06:43
Maybe it's obvious to most, but this code comes AFTER the map is loaded, so it should be at least on windows.onload — Victoria Ruiz, Aug 18 '15 at 15:32

duncan · Accepted Answer · 2014-09-25T12:26:28.140

143

You need to have an event listener for when the window resizes. This worked for me (put it in your initialize function):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

edited Sep 25 '14 at 12:26

answered Jan 09 '12 at 17:58

duncan

31,401
13
78
99

This works perfect, thanks! But if someone has moved the map, how do I get the new center of the map? I found the getCenter() function, but can't get it to work correctly. map.setCenter(map.getCenter()); doesn't work. – Gregory Bolkenstijn Jan 10 '12 at 10:19
You want another event listener, I think for "center_changed" on the map object, that updates a global variable with the new coordinates, which you can then use in your setCenter. – duncan Jan 10 '12 at 11:15
1

I tried that as well: `var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); });` Doesn't work. Any help would be appreciated. – Gregory Bolkenstijn Jan 10 '12 at 11:27
How about "bounds_changed" instead? – duncan Jan 10 '12 at 12:03
No change. It doesn't seem to accept the center var's value I think. I also tried: `var lat = center.lat(); var lng = center.lng(); var center2 = new google.maps.LatLng(lat, lng); map.setCenter(center2);` Doesn't work either. – Gregory Bolkenstijn Jan 10 '12 at 12:24
You might need a closure: http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures – duncan Jan 10 '12 at 13:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6586/discussion-between-gregory-bolkenstijn-and-duncan) – Gregory Bolkenstijn Jan 10 '12 at 16:12
49

This is the easiest way: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ – AO_ Mar 08 '13 at 00:06
Guys addDomListener(window, 'resize', function() { does not worked for me :( – Vikram Anand Bhushan May 15 '14 at 13:14
@duncan it worked but I had to add it with orientationchange event – Vikram Anand Bhushan May 15 '14 at 13:28
0x616f's solution is the best, because it also works when clicking the maximize/restore's window button, which doesn't with the main solution. – Fabián Apr 17 '17 at 03:32

score 83 · Answer 2 · edited Apr 19 '23 at 08:45

83

Detect the browser resize event, resizes the Google Map while preserving the center point:

var map = ...; // your map initialisation code

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

You can use the same code in other event handlers when resizing the google map via other means (e.g. with a jQuery-UI 'resizable' control).

Source: http://andrewodendaal.com/keep-google-map-v3-centered-when-browser-is-resized/ credit to @smftre for the link.

Note: This code was linked in @smftre's comment on the accepted answer. I think it's worth adding it as its own answer since it is really superior to the accepted answer. It eliminates the need of a global variable to track the center point and an event handler to update that variable.

edited Apr 19 '23 at 08:45

AO_

2,573
3
30
31

answered Dec 19 '13 at 07:21

William Denniss

16,089
7
81
124

Agree with @William, this method results in a more accurate center-position when the map is resized. – tenthfloor Feb 02 '14 at 17:08
accepted answer wasn't working correctly, this one did the trick – Tom Mar 17 '14 at 11:52
This is the best and working solution. Works on every resize windows event. Other solutions didnt work properly. – zdarsky.peter Sep 11 '14 at 21:38
1

This really should have been posted as community wiki. – gustavohenke Jan 27 '15 at 12:41
It works, but I'd like to understand it more. What precisely does `google.maps.event.trigger(map, "resize");` ? – meduz' Jun 26 '15 at 13:22
@WilliamDenniss link was updated to: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ – AO_ Feb 12 '16 at 10:16

score 4 · Answer 3 · answered Apr 16 '14 at 03:11

4

Some good examples on w3schools.com. I used the following and it works great.

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

answered Apr 16 '14 at 03:11

Steve Mulvihill

688
6
13

drjorgepolanco · Answer 4 · 2016-09-13T23:55:19.883

html: Create a div with an id of your choice

<div id="map"></div>

js: Create a map and attach it to the div you just created

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

Center when the window resizes

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

David Bradshaw · Answer 5 · 2017-04-27T16:16:54.473

0

Updated of the above solution to es6.

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));

edited Apr 27 '17 at 16:16

answered Apr 27 '17 at 10:16

David Bradshaw

11,859
3
41
70

You're using the `addDomListener` for both the `window`, which is a DOM element, and the `map`, which isn't. The map object should use the `google.maps.event.addListener` or its own `map.addListener` event handler. – duncan May 01 '17 at 22:26

Center Google Maps (V3) on browser resize (responsive)

5 Answers5

Linked