How to integrated Openlayers Map into web application?

first of all we need to dowload Openlayers API from here:   http://openlayers.org/api/OpenLayers.js

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

 

Init();

retun false; // this is improve code perfomance

 

});

 

function Init()

{

 

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

map.events.register(‘click’, map);

 

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

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

icon = new OpenLayers.Icon(‘http://www.openlayers.org/dev/img/marker.png’, size, offset);

 

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

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

map.addLayer(markers);

 

}

 

HTML File [Code]:

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

</div>Map