Time for Action – using multiple map objects

We've used only one map object in all our examples up to this point. Adding multiple map objects isn't very hard though—let's figure out how it's done.

1. We're going to first have to add another HTML element for our second map, and we'll rename the first map element's ID for consistency. Edit your HTML div elements:

       <div id='map_1_element' style='height: 500px; float:left; width:400px;'></div>
       <div id='map_2_element' style='height: 500px; float:left; width:400px;'></div>
       <div style='clear:both;'></div>

2. Now, in your JavaScript code, let's rename the global map variable and add another one to hold our second map (right above the init() function):

   var map1, map2;

3. Let's create our first map and its layers and controls. Nothing new here, we're mainly just renaming the map object to map_1, and adding a layer to it and setting the center:

   map_1 = new OpenLayers.Map('map_1_element', {}); 
   
   //Create a base layer...