<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script language="javascript" src="jquery-1.4.1.min.js"
type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"
type="text/javascript"></script>
<script src="GoogleMapV3.js" type="text/javascript"></script>
<script type="text/javascript">
function setLatLongValue() {
jQuery('#txtPointA1').val(currentlatlng.lat());
jQuery('#txtPointA2').val(currentlatlng.lng());
}
var map;
var circle;
var marker;
var currentlatlng = new google.maps.LatLng(23.06368, 72.53135);
var infowindow;
function loadMap() {
setLatLongValue();
var mapOptions = {
zoom: 16,
center: currentlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
setMarker();
/**
google.maps.event.addDomListener(map, 'click', function (e) {
currentlatlng = e.latLng;
if (currentlatlng) {
map.panTo(currentlatlng);
setLatLongValue();
setMarker();
}
});
*/
}
function drawCircle() {
if (circle != undefined)
circle.setMap(null);
var radius = 200;
if (jQuery('#txtPointB1').val() != '' && !isNaN(jQuery('#txtPointB1').val()) && parseInt(jQuery('#txtPointB1').val()) > 0) {
radius = parseInt(jQuery('#txtPointB1').val());
}
jQuery('#txtPointB1').val(radius.toString());
var options = {
strokeColor: '#800000',
strokeOpacity: 1.0,
strokeWeight: 1,
fillColor: '#C64D45',
fillOpacity: 0.5,
map: map,
center: currentlatlng,
radius: radius
};
circle = new google.maps.Circle(options);
circle.setEditable(true);
google.maps.event.addListener(circle, 'radius_changed', function () {
radius = parseInt(circle.getRadius());
document.getElementById('txtPointB1').value = radius;
});
}
function setMarker() {
if (marker != undefined)
marker.setMap(null);
marker = new google.maps.Marker({
position: currentlatlng,
draggable: true,
icon:'none',
map: map
});
if (marker) {
google.maps.event.addDomListener(marker, "dragend", function () {
currentlatlng = marker.getPosition();
setLatLongValue();
drawCircle();
});
drawCircle();
}
}
google.maps.event.addListener(marker, "click", function () {
var data = '<div>Current LatLong:</div><div>' + currentlatlng + '</div>';
infowindow = new google.maps.InfoWindow({
content: data,
position: currentlatlng
});
infowindow.open(map);
});
</script>
</head>
<body>
<style>
</style>
<input type="text" ID="txtPointA1" />
<input type="text" ID="txtPointA2" />
<input type="text" ID="txtPointB1" οnchange="drawCircle();" />
<input type="text" ID="sliderRadius" />
<input type="text" ID="txtRadiusShow" />
<div id="map" style="height:100%"></div>
</body>
</html>
<script type="text/javascript" language="javascript">
$(window).load(function () {
loadMap();
});
</script>