Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Recenter a Google map after container changed width

I have a google map set with the Javascript API V3. It's displayed in a div with a dynamic width, as a content pane slides up when we click on a marker.

Everything works fine, but one thing: When the pane slides up, the width of the map is changed, and so the center is displaced to the right (the pane is on the left). It is really inconvienient especially for small resolutions, where you can't even see the center after the pane is open.

I've tried the 'resize' trigger, but it doesn't seem to work... Any ideas ?

Thanks a lot !

like image 502
Charleshaa Avatar asked Dec 19 '11 07:12

Charleshaa


People also ask

How do I recenter my Google Maps?

Swipe down with to fingers and tap the Auto-rotate option. Launch the Google Maps app again and check if the auto-rotate feature is working properly now.

How do I change the width of InfoWindow on Google Maps?

maps. InfoWindow({ content: some_text, maxWidth: 200 }); The documentation notes that the "value is only considered if it is set before a call to open. To change the maximum width when changing content, call close, setOptions, and then open."


1 Answers

Calling resize by it self will not acheive what you need.

What you need to do is first (before a resize occurs) get the current center of the map

var currCenter = map.getCenter(); 

Then you need to do something like the following, after your div is resized.

google.maps.event.trigger(map, 'resize'); map.setCenter(currCenter); 

Should do the trick

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

like image 63
omarello Avatar answered Sep 27 '22 20:09

omarello