Creating two synced maps side by side

Maps are useful to human beings. With the help of maps, people explore or compare their surrounding area. Sometimes they need to compare two maps side by side to see the difference in real time. For example, you might want to check a satellite imagery side by side with terrain maps to see where the mountains are.

This recipe shows you how to add two maps in the same page and sync them together to show the same area and compare them with the help of Google Maps JavaScript API events.

Getting ready

You already know how to create a map from the previous chapters. So, only additional code lines are written.

You can find the source code at Chapter 5/ch05_sync_maps.html.

How to do it…

If you want to create two maps that are synced together, you should perform the following steps:

1. First, add the CSS styles of the div objects in the header to show them side by side:

   .mapClass { width: 500px; height: 500px; display: inline-block; }

2. Then define two global map variables...