Book Image

OpenLayers 2.10 Beginner's Guide

Book Image

OpenLayers 2.10 Beginner's Guide

Overview of this book

Table of Contents (18 chapters)
OpenLayers 2.10
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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...