Implementing Openlayers Maps – Free Alternate of Google Maps

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

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;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/