CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
LoomyBear
LoomyBear

Reputation: 449

Is there any way to sync map dragging in Google Maps API V3?

I use GMaps API v3 and I have two Google Maps standing side by side let's call the map to the left X and the map to the right Y. My question is if it's possible to make Y drag itself when user drags X?

I know how to detect the drag event on the google map, but how to apply the drag from one map to the other?

Thanks!

Upvotes: 2

Views: 1382

Answers (2)

tonycoupland
tonycoupland

Reputation: 4247

I wanted a similar functionality but required the zoom to also be mirrored.

As you might expect, it is very similar to the accepted answer:

google.maps.event.addListener(map, 'bounds_changed', (function () {
    map2.setCenter(map.getCenter());
    map2.setZoom(map.getZoom());
}));

And here is a JSFiddle which demonstrates it: http://jsfiddle.net/LREfU/

Upvotes: 3

DotNetWala
DotNetWala

Reputation: 6610

Here's what I would try: In your drag event, use getCenter() on X, then use that lat-lng to setCenter() on Y . I am assuming you're using the map API's 'bounds_changed' event.

UPDATE: some thing like this:

//X and Y are map objects
google.maps.event.addListener(X, 'bounds_changed', (function () {
    Y.setCenter(X.getCenter());
}));

You can even add some logic using setTimeout to detect when the user stops dragging X, and only then set the center on Y.

Upvotes: 2

Related Questions