How to integrated Openlayers Map into web application?

first of all we need to dowload Openlayers API from here:

And then add to reference in to  your web application.

1. initialize:

JavaScript File[Code]:

Make function like this  in to Javascript file which is used in to your appliction.

var map;  // global variables declaration

var size;

var icon;

var offset;

var markers;


$(document).ready(function () {   // after load it’s means ready state in jquery



retun false; // this is improve code perfomance




function Init()



map = new OpenLayers.Map(‘Map’);  // here use div id‘click’, map);


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

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

icon = new OpenLayers.Icon(‘’, size, offset);


map.addMarker(OpenLayers.LonLat(72.5627013, 23.0376233),icon); // show marker

map.setCenter(new OpenLayers.LonLat(72.5627013, 23.0376233), 10);





HTML File [Code]:

<div id=”Map” style=”width: 100% !important; height: 600px;        float: left;”>