I ran into an issue trying to synchronize two maps and I believe it is due to the animation when using setCenter or panTo.
Using the following code: <html> <body> <div style="width: 300px; height: 300px; border: 1px solid #FFFF00; margin-bottom: 10px" id="map1"></div> <div style="width: 300px; height: 300px; border: 1px solid #000000" id="map2"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/ js?sensor=false"></script> <script type="text/javascript"> var map1 = new google.maps.Map(document.getElementById('map1'), { zoom : 14, center : new google.maps.LatLng(38.89958, -77.03613), mapTypeId : google.maps.MapTypeId.SATELLITE }); var map2 = new google.maps.Map(document.getElementById('map2'), { zoom : 14, center : new google.maps.LatLng(38.89958, -77.03613), mapTypeId : google.maps.MapTypeId.ROADMAP }); google.maps.event.addListener(map1, 'center_changed', function() { map2.setCenter(map1.getCenter()); }); </script> </body> </html> I'm trying to synchronize the movements of the two maps. You will notice that when dragging the map on top, the animation on the top works as expected. The one at the bottom goes crazy when dragging just a little bit fast (at normal end-user speed). In my experience this looks like a race condition. I then tried to chain the callbacks on the 2nd map to make sure that I did not fire to setCenter to close from one another: google.maps.event.addListener(map2, 'center_changed', function() { q.notify(); }); google.maps.event.addListener(map1, 'center_changed', function() { q.execute(function(c) { map2.setCenter(c); }, map1.getCenter()); }); q stores the jobs in a stack and only execute them when told to by q.notify(); In this example, I have assumed that center_changed was only fired once the animation was completed, which would effectively prevent the program to change the center on map2 before the animation is finished. Turns out my assumption was wrong. I guess center_changed is fired before the animation starts. My final attempt was to try and delay the callback execution by wrapping the q.notify in a setTimeout. In this case it does work. I basically slowed down the pace of dragging for the 2nd map. But it now looks very slow and choppy. There are a few ways to go about it as far as I can tell: 1- make the animation optional 2- remove the animation for setCenter since currently panTo seems to do exactly the same thing 3- fix the race condition 4- allow to change the center via setOptions, which would not animate (it currently does) Something to think about.
-- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
