Openlayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript. In this tutorial I will show show how to implement Openlayer maps in your webpage. See the live demo.
Live Demo Download Script
Live Demo Download Script
HTML Code
<html>
<head>
<title>Implementing Openlayers Maps | WebSpeaks.in</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div id="main">
<h1>Implementing Openlayers Maps</h1>
<div id="map"></div>
</div>
<script type="text/javascript">
map = new OpenLayers.Map("map"); //id of the container
map.addLayer(new OpenLayers.Layer.OSM());
//Add longitude and latitude of the location
var lonLat = new OpenLayers.LonLat( '77.3833', '29.0167' )
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
//Zoom level
var zoom='5';
//Add markers
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonLat));
map.setCenter (lonLat, zoom);
</script>
</body>
</html>
A Bit of CSS
body{
background: none repeat scroll 0 0 #EFEFEF;
color: #555555;
}
#main{
width:800px;
color: #444;
margin:auto;
}
#map{
width:700px;
height:400px;
border:2px solid #555555;
padding: 5px;
margin:auto;
}
h1{
font-family: Georgia, Times, serif;
color:#58B9EB;
}
