
<html>


  <head>


    <title>OpenLayers Demo</title>


    <style type="text/css">


      html, body, #map_id {


          width: 100%;


          height: 100%;


          margin: 0;


      }


    </style>


        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> 


    <link rel="stylesheet" href="style.css" type="text/css"> 


    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>


    <script>


        var map, layer;


      function init() {


        map = new OpenLayers.Map({   div: "map_id"   });


        var mapnik = new OpenLayers.Layer.OSM();


        map.addLayer(mapnik);


        map.setCenter(new OpenLayers.LonLat(0,0), 3) ;


                  var markers = new OpenLayers.Layer.Markers( "Markers" );


                  var size = new OpenLayers.Size(21,25);


                  var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);


                  map.addLayer(markers);


                  var icon0 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);


                  var icon1 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-blue.png', size, offset);


                  var m1 = new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon0);


                  var m2 = new OpenLayers.Marker(new OpenLayers.LonLat(45,45),icon1);


                  markers.addMarker(m1);


                  markers.addMarker(m2);                 


      }


    </script>


  </head>


  <body onload="init();">


    <div id="map_id"></div>


  </body>


</html>