copy paste below code and run the application - :)
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var markersArray = [];
var marker;
var infowindow = new google.maps.InfoWindow();
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
google.maps.event.addListener(marker, 'drag', function (event) {
document.getElementById("divLatitude").innerHTML = event.latLng.lat();
document.getElementById("divLongitude").innerHTML = event.latLng.lng();
placeMarkerOP(event.latLng);
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("divLatitude").innerHTML = event.latLng.lat();
document.getElementById("divLongitude").innerHTML = event.latLng.lng();
placeMarkerOP(event.latLng);
});
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
clearOverlays();
document.getElementById("address").value = results[0]['formatted_address'];
document.getElementById("divLatitude").innerHTML = results[0].geometry.location.ob;
document.getElementById("divLongitude").innerHTML = results[0].geometry.location.pb;
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
title: results[0]['formatted_address'],
position: results[0].geometry.location,
animation: google.maps.Animation.DROP
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function placeMarker(location) {
geocoder.geocode({ 'latLng': location }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
clearOverlays();
document.getElementById("address").value = results[1].formatted_address;
document.getElementById("divLatitude").innerHTML = results[0].geometry.location.ob;
document.getElementById("divLongitude").innerHTML = results[0].geometry.location.pb;
marker = new google.maps.Marker({
position: location,
title: results[1].formatted_address,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', toggleBounce);
google.maps.event.addListener(marker, 'drag', function (event) {
document.getElementById("divLatitude").innerHTML = event.latLng.lat();
document.getElementById("divLongitude").innerHTML = event.latLng.lng();
placeMarkerOP(event.latLng);
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("divLatitude").innerHTML = event.latLng.lat();
document.getElementById("divLongitude").innerHTML = event.latLng.lng();
placeMarkerOP(event.latLng);
});
map.setCenter(location);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
function placeMarkerOP(location) {
geocoder.geocode({ 'latLng': location }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
document.getElementById("address").value = results[1].formatted_address;
infowindow.setContent(results[1].formatted_address);
}
}
});
}
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</head>
<body onload="initialize()" >
<table width="800px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<h3>Latitude : <div id="divLatitude" name="divLatitude"></div> </h3>
<h3>Longitute : <div id="divLongitude" name="divLongitude"></div></h3>
<p><textarea id="address" rows="2" >Paota, Jodhpur,Rajasthan, India</textarea><input type="button" value="Show" onclick="codeAddress()"></p>
</td>
</tr>
<tr>
<td>
<div id="map_canvas" style="height:500px; width:100%;" >
</div>
</td>
</tr>
</table>
</body>
</html>
Hope this help you !
