O'Reilly logo

OpenLayers 2.10 by Erik Hazzard

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required