<head runat=”server”>
<title>Google Map</title>
<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() {
var ClientAddress = document.getElementById(“txtLocation”).value;//………set your client value here
if (ClientAddress==”) {
ClientAddress = ‘Delhi’;//……………set your Default Value here if u want ou just delete this condition.
}else{
}
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
codeAddress(ClientAddress);
google.maps.event.addListener(map, ‘click’, function (event) {
placeMarker(event.latLng, ClientAddress);
});
}
function codeAddress(ClientAddress) {
var address = ClientAddress;
geocoder.geocode({ ‘address’: address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
clearOverlays();
address = results[0][‘formatted_address’];
document.getElementById(“latlong”).innerText = results[0].geometry.location;
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, ClientAddress) {
geocoder.geocode({ ‘latLng’: location }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
clearOverlays();
var txtValue = ClientAddress;
txtValue = results[1].formatted_address;
document.getElementById(“latlong”).innerText = results[0].geometry.location;
marker = new google.maps.Marker({
position: location,
title: results[1].formatted_address,
map: map,
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);
map.setCenter(location);
}
} else {
alert(“Geocoder failed due to: ” + status);
}
});
}
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>
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-20626488-1’]);
_gaq.push([‘_trackPageview’]);
(function () {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onload=”initialize()”>
<form id=”form1″ runat=”server”>
<table>
<tr>
<td>
<asp:TextBox ID=”txtLocation” runat=”server”></asp:TextBox>
</td>
<td>
<asp:Button ID=”Button1″ runat=”server” Text=”Show Map” OnClientClick=”initialize()” />
</td>
</tr>
<tr>
<td colspan=”2″>
</td>
</tr>
</table>
<div>
<span id=”latlong” style=”visibility: hidden”></span>
<div id=”map_canvas” style=”height: 250px; width: 250px;”>
</div>
</div>
</form>
</body>
</html>
Happy Coding…
