Web Speaks

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