1

I am trying to do almost exactly what Charleshaa did two years ago, so my code looks really similar to the code suggested in the answers given back then.

But something really annoys me: when the width of the map-canvas (map container) is increased, the map itself stays on the left of the canvas and the additional area is added on the right. Just a millisecond or so later map.setCenter(oldCenter); is called and the position of the map inside the container changes (to the right).

This change can be seen (as a jump to the right) and is really annoying.

Is there a way to set the center at the same time the map is resized, not shortly after?

I resize the map with $("#map-canvas").css("width","100%");. So I would like to synchronize a jQuery CSS event and a Google Maps event.

Thanks a lot,

timon

EDIT

I would like to show a sidebar on the left, so when somebody clicks on the map, the sidebar appears and the map has to reload (the center should stay the same).

To show you, I did a jsfiddle but this time the map behavior is perfect. The jsfiddle contains only part of my code, because otherwise I would have to post a lot more.

I guess my coding is so bad, that it makes the map a little bit jumpy, am I right?

Community
  • 1
  • 1
Timon
  • 75
  • 1
  • 1
  • 13
  • Where do you call setCenter in your code? Btw where is your code? And what causes the map to resize? – MrUpsidown Dec 29 '13 at 12:39
  • Please post jsfiddle.net. This way it is 1) unclear what exactly you do 2) unclear what you observe. 3) Of course map "jumps" when it is re-centered! That's what I would expect. 4) If you don't want any map move after resizing, why don't you first setCenter and *then* resize? – Tomas Dec 29 '13 at 12:52

2 Answers2

1

Try map.panTo(oldCenter); this will make the change smother than setCenter() as long as the new point within the frame.

Basil Basaif
  • 362
  • 8
  • 20
  • I've tried it already, but I don't want the map to move at all after resizing. But thanks for your answer :) – Timon Dec 29 '13 at 00:30
0

I found the solution: When google.maps.event.trigger(map, 'resize'); and map.setOptions({center: oldCenter}); are called within a timeout, the map is jumping on resize. The function after a jQuery .animate() seems to behave exactly like a timeout.

I updated the jsfiddle, which I posted in my question, a little bit so the jumping is more obvious (http://jsfiddle.net/5YWFW/1/). There is a really annoying jump when you click on the map to show the sidebar.

When the code on the bottom of the JS is not written inside the .animate() function but directly after, the map looks much better (http://jsfiddle.net/5YWFW/2/).

EDIT

Apparently this only has an effect on Google Chrome running on Mac OS X.

Timon
  • 75
  • 1
  • 1
  • 13