Google Maps API Tutorial - Dual Maps

© 2006, 2007, 2009 Mike Williams

Translate this page:


Dual Maps

It's possible to have a pair of maps that track each other's movements by using "move" or "moveend" listeners one each other and updating the position of the other map to match the one that moved. For example, a small zoomed-out map can be used as a dynamic thumbnail to help you see what the main map is zoomed in on.

The only problem is that updating the position of the second map cases "move" and "moveend" events, and we don't want to attempt to process those events, otherwise the code goes into a loop and gets stuck.

All we need to do is to add a pair of extra variables that remember whether the maps are being moved by our own code, and only update the other map when this is not the case, i.e. when the map is being moved by the user.

In this example there's a crosshair on the small map. This is just a marker which gets recentred every time either map moves.

Credit Thanks to Esa Ojala for posing the original question which led me to develop this technique.

Back to Mike's Homepage
Up to the start of this tutorial