Java Script – Synchronization of three maps

Three weeks ago I have started to read an outstanding book for the Google API. Currently, I have read about 70% of it and I have found plenty of useful code to present. Here is the book:

8825OT_Google Maps API Cookbook 

In the current article I will show you how to put three types of google maps next to each other and to control them by changing the first one.

The code that I present is based on the cookbook above. In the recipe from the cookbook, the maps are two and they are “listening” to each other – e.g. if you move map type 1, map type 2 moves as well. In my example, the maps are three and they are only listening to map 1 – e.g. if you want to achieve simultaneuos effect, you should work only with map 1. This is how the final result from the code looks like:


If you do not see the three maps on the same line, but somehow one below the two, you should try to zoom out your browser.

Here , you may find the code, working 🙂

So, finally the code… What does “the magic”?

1. We define three global variables with the names map1, map2 and map3.

2. We create three functions, one for each map. In the functions we set the centre and the zoom of the map:

Then we do the core of the trick – we get the map DOM element and we create a map with the DOM element, which we have obtained. This DOM element is the Div, which we finally show at the end of the code.

At last, we make the maps follow the left map with this code:

This code is repeated for each map correspondingly. At the end of the JavaScript we run the functions for the maps and that is it:

I think it is quite comprehensive. One last thing –  if you are using Google Maps API, you should make your own account in to get your own API Key. This is needed, because there are limits for the free usage of google. The limits are quite high (something like 20 K), but still, it is better to use your own! The API key is put at the place where I write PUT_YOUR_OWN_KEY. It is free and quick to obtain one.

That is it! Enjoy the code!

Tagged with: , , ,