Google Maps Radius Tool - jQuery
Google Maps Drawing Tool
The following google maps api example demonstrates how to drawing a interactive circle around an address with given radius and getting latitude and longitude from google maps api and calculating distance in Km. Find the javascript code snippet below:-
 |
| google earth draw circle radius - map radius tool |
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 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 src="js/utility.js" type="text/javascript"></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);
}
</script>
</head>
<body onload="LoadMap();">
<form id="form1" runat="server">
<h3>
google maps api radius - 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>
utility.js
//Draw Widget Circle
function initWidget(map) {
var distanceWidget = new DistanceWidget(map);
google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
displayInfo(distanceWidget); //Put you core filter logic here
});
google.maps.event.addListener(distanceWidget, 'position_changed', function () {
displayInfo(distanceWidget); //Put you core filter logic here
});
}
//For display center and distance
function displayInfo(widget) {
var info = document.getElementById('divInfo');
info.innerHTML = 'Position: ' + widget.get('position') + ', Distance (in Km): ' +
widget.get('distance');
}
/*------------------------------------Create Distance Widget--------------------*/
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
//Anchored image
var image = {
url: 'Center.png',
size: new google.maps.Size(24, 24), origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(12, 12)
};
//Center Marker
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);
//Radius Widget
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();
/*------------------------------Create Radius widget-------------------------*/
function RadiusWidget() {
var circleOptions = {
fillOpacity: 0.05,
fillColor: '#686868',
strokeColor: '#686868',
strokeWeight: 1,
strokeOpacity: 0.8
};
var circle = new google.maps.Circle(circleOptions);
this.set('distance', 50);
this.bindTo('bounds', circle);
circle.bindTo('center', this);
circle.bindTo('map', this);
circle.bindTo('radius', this);
// Add the sizer marker
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
//Distance has changed event handler.
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
//Sizer handler
RadiusWidget.prototype.addSizer_ = function () {
var image = {
url: 'Resize.png',
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 cicle!',
raiseOnDrag: false,
});
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();
});
};
//Center changed handler
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);
}
};
//Calculate Distance
RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371; // Radius of the Earth in km
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;
//Limit max 50km and min half km
if (d > 100) {
d = 100;
}
if (d < 0.5) {
d = 0.5;
}
return d;
};
//Set distance
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);
}
};
//Fit circle when changed
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);
}
};
I hope you will enjoy the Google Maps API Developer tip while developing GIS web application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. Also If you like this article, don't forget to share this article with your friends and colleagues.
Google Maps Radius Tool - jQuery
Reviewed by Ravi Kumar
on
2:41 PM
Rating:
Reviewed by Ravi Kumar
on
2:41 PM
Rating:
this post help for me! thanks........
ReplyDeletebut i want to get middle coordinate Address details ..
What is Resize.png and center.png in urls
ReplyDeleteResize.png and center.png are icons using in this widget to display centre and resize the circle.
Deletethank you so much for share this. Your code is awesome, and run very well. I'm using a lot of tips that i found in your blog. Thank you for this.
ReplyDeleteThank you for your appreciation of my work. :)
Delete