Time for Action – creating a multiple map and custom event application

In this example, we'll make an application that contains two maps, side by side, that update one another when moved.

1. Create a copy of the previous example. We'll be working on it as the basis for this example.

2. Let's recreate the first map objects. For this example, we'll make the first map zoomed in a bit and set a maxResolution so the map cannot be zoomed out more than a few times. We'll also use two control—Navigation and PanZoomBar.

   map_1 = new OpenLayers.Map('map_1_element', { 
       controls: [ 
           new OpenLayers.Control.Navigation(), 
           new OpenLayers.Control.PanZoomBar() 
       ], 
       maxResolution:0.0054931640625, 
       minResolution:0.00034332275390625 
   });

3. Let's also change the center point. We'll create a variable to store the starting center coordinate (which will also be used by the second map) and change the map.zoomToMaxExtent line. After the layer has been added to the map, use the following code:

   var...