Demo OpenLayer

by alfannas

HTML

<script src="https://openlayers.org/api/OpenLayers.js"></script>
<!DOCTYPE HTML>
<html>
<head>
    <title>OpenLayers Basic Example</title>

</head>

<body onload="init();">
    <p>My HTML page with an embedded map</p>
    <div id="mapdiv"></div>
</body>
</html>

CSS

#mapdiv { width:350px; height:250px; }
div.olControlAttribution { bottom:3px; }

JavaScript

function init() {
        map = new OpenLayers.Map("mapdiv");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);

        var lonlat = new OpenLayers.LonLat(-1.788, 53.571).transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
          );

        var zoom = 13;

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(lonlat));

        map.setCenter(lonlat, zoom);
      }