<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CircleDragableIncreaseRadius.aspx.cs" Inherits="CircleDragableIncreaseRadius" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Google Maps - Drawing a Interactive Circle Around a Point Radius</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false"></script>
<%----%>
<script type="text/javascript">
var map;
function LoadMap() {
var center_pt = new google.maps.LatLng(28.992226, 77.705557);
var mapOptions = {
zoom: 8,
center: center_pt,
mapTypeControl: false,
streetViewControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var styles = [
{ elementType: "geometry",
stylers: [
{ hue: "#00ffe6" },
{ saturation: -10 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({ styles: styles });
initWidget(map);
}
function initWidget(map) {
var distanceWidget = new DistanceWidget(map);
google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
displayInfo(distanceWidget);
});
google.maps.event.addListener(distanceWidget, 'position_changed', function () {
displayInfo(distanceWidget);
});
}
function displayInfo(widget) {
var info = document.getElementById('divInfo');
info.innerHTML = 'Position: ' + widget.get('position') + ', Distance (in Km): ' +
widget.get('distance');
}
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var image = {
url: 'Images/cur.jpg',
size: new google.maps.Size(24, 24), origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(12, 12)
};
var marker = new google.maps.Marker({
draggable: true,
icon: image,
title: 'Drag to move new location!',
raiseOnDrag: false,
});
marker.bindTo('map', this);
marker.bindTo('position', this);
var radiusWidget = new RadiusWidget();
radiusWidget.bindTo('map', this);
radiusWidget.bindTo('center', this, 'position');
this.bindTo('distance', radiusWidget);
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
function RadiusWidget() {
var circleOptions = {
fillOpacity: 0.05,
fillColor: '#686868',
strokeColor: '#686868',
strokeWeight: 3,
strokeOpacity: 0.5,
draggable: true
};
var circle = new google.maps.Circle(circleOptions);
this.set('distance', 20);
this.bindTo('bounds', circle);
circle.bindTo('center', this);
circle.bindTo('map', this);
circle.bindTo('radius', this);
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
RadiusWidget.prototype.addSizer_ = function () {
var image = {
url: 'Images/resize.jpg',
size: new google.maps.Size(24, 24),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(12, 12)
};
var sizer = new google.maps.Marker({
draggable: true,
icon: image,
cursor: 'ew-resize',
title: 'Drag to resize the circle!',
raiseOnDrag: true,
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function () {
me.setDistance();
});
google.maps.event.addListener(sizer, 'dragend', function () {
me.fitCircle();
});
};
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
if (bounds) {
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371;
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
if (d > 20) {
d = 20;
}
if (d < 0.5) {
d = 0.5;
}
return d;
};
RadiusWidget.prototype.setDistance = function() {
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = this.distanceBetweenPoints_(center, pos);
this.set('distance', distance);
var bounds = this.get('bounds');
if (bounds) {
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
RadiusWidget.prototype.fitCircle = function () {
var bounds = this.get('bounds');
if (bounds) {
map.fitBounds(bounds);
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
</script>
</head>
<body onload="LoadMap();">
<form id="form1" runat="server">
<h3>
Draw a Circle on Google Maps - jQuery Widget</h3>
<div id="divInfo" style="font-family: Arial; font-size: 12px; color: Red;">
</div>
<br />
<br />
<div id="map_canvas" style="width: auto; height: 500px;">
</div>
</form>
</body>
</html>