Adding markers to the map

Markers are widely used in web mapping applications. They allow us to quickly identify points of interest (POI) by showing an icon at the desired place.

This recipe shows how to add markers to our maps by using the OpenLayers.Marker and OpenLayers.Layer.Markers classes.

How to do it...

1. Start by creating an HTML page with dependencies on the OpenLayers library. Add the div element that will hold the map:

   <!-- Map DOM element -->
   <div id="ch3_markers" style="width: 100%; height: 100%;"></div>
   
   Create the map instance, add a base layer and a layer switcher control:
   <!-- The magic comes here -->
   <script type="text/javascript">
   
       // Create the map using the specified DOM element
       var map = new OpenLayers.Map("ch3_markers");    
       
       layer = new OpenLayers.Layer.OSM("OpenStreetMap");
       map.addLayer(layer);
       
       map.addControl(new OpenLayers.Control.LayerSwitcher());
       map.setCenter(new OpenLayers.LonLat(0,0), 3);

2. Now, add a...