Posts Tagged ‘maps’

Remove Circle / Polygons from Google Map api v3

What differentiates circle/rectangle from a polygon in Google maps is that circle/rectangles are interpreted as closed figures bounded by bounds where as for a polygon you can define a path with number of points on it to draw. Although they both can be removed by setting map as null, Polygons still offer more options. If whole figure is to be removed, call setMap with null. But if only parts of polygon has to be removed, iterate over them and remove them using removeAt. Following example shows
<script>
/* 
** closedFig is the object of class google.maps.Circle or google.maps.Rectangle or 
** google.maps.Polygon
*/
removeFig(closedFig) {
closedFig.setMap(null);
}

/* 
** poly is the object of class google.maps.Polygon
** vertices is the collection of vertices to be removed. 
** if vertices empty this removes the whole polygon
*/
removeSelected(poly, vertices) {
       if (vertices.length == 0 )
		vertices = poly.getPath();

	// Iterate over the vertices.
	for (var i = vertices.length-1; i > -1; i--) {
		vertices.removeAt(i);
	}
}
</script>

Finding the distance between two points using the Google Maps API v3

Following code gives an insight on how to find the distance between two locations using google map api v3. Usage is pretty simple. Just initialize geocoder in the initialize method which in turn is called by body onload. Then we pass the two locations to the function distance and it simply returns the distance between those two locations. When working on this, I was long time stuck with my JS code getting executed, API getting called but not getting result at the point where I want it. By the time the call back from Google comes back, my code had reached its final lines with nothing in my hand. For the solution I had to work out this. If you look closely, there are two pillars of this code. One is usage of global variables and another is recursive call for geocoding. Reason for using both of them is same. Since, the JS is asynchronous by nature, by the time callback from google server returns virtually your whole rest of the code would have been executed, leaving the data returned useless for any usage. Hence, we have to depend on a miniature model of recursive call, called when the server returns the results and then call the next point. Once all the points have been geocoded just run the distance function based on their lat and lang coordinates and store result in global variable. Else, how would you get the result 🙂 .  Easy isnt it. Same logic can be extended for calculating multiple points distance etc.
 <script type="text/javascript" src="<a href="http://maps.google.com/maps/api/js?sensor=false" target="_blank">http://maps.google.com/maps/api/js?sensor=false</a>"></script>
<div id=":1b"><script type="text/javascript">
 var geocoder;
 var map;
 var addresses;
 var results;
 var dist;

 function initialize() {
 geocoder = new google.maps.Geocoder();
 (distance("Silver Spring, US", "Bethesda, US"));
 }

 function distance(add1, add2) {
 if (!geocoder)
 return 'Error, no geocoder';

 addresses = new Array(2);
 addresses[0] = add1;
 addresses[1] = add2;
 results = new Array(2);
 results[0] = new Array(2);
 results[1] = new Array(2);

 results[0][0] = 0; results[0][1] = 0; results[1][0] = 0; results[1][1] = 0.87;
 geocoded(1);

 }

 function geocoded(i) {
 geocoder.geocode( { 'address': addresses[i] }, function(res, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 results[i][0] = parseFloat(res[0].geometry.location.lat());
 results[i][1] = parseFloat(res[0].geometry.location.lng());
 i--;

 if (i >= 0)
 geocoded(i);
 else
 dist = distances(results[0][0], results[0][1], results[1][0], results[1][1]);

 }// if ok
 }); // geo coder add find
 }

 function distances(lat1, lon1, lat2, lon2) {
 // ACOS(SIN(lat1)*SIN(lat2)+COS(lat1)*COS(lat2)*COS(lon2-lon1))*6371
 // Convert lattitude/longitude (degrees) to radians for calculations
 var R = 3963.189; // meters

 // Find the deltas
 delta_lon = deg2rad(lon2) - deg2rad(lon1);

 // Find the Great Circle distance
 distance = Math.acos(Math.sin(deg2rad(lat1)) * Math.sin(deg2rad(lat2)) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
 Math.cos(delta_lon)) * 3963.189;

 alert(distance + ' miles');
 return distance;
 }

 function deg2rad(val) {
 var pi = Math.PI;
 var de_ra = ((eval(val))*(pi/180));
 return de_ra;
 }
 </script>

</head>
<body onload="initialize()" >
</body></div>
<div>

Drawing a circle with Google Maps API V3

Google came out with v3 for its API this year, which has some slimming down of its codebase, and probably has some back-end improvements on their server as well. In V2 GPolygon objects consist of a series of points in an ordered sequence to draw closed shapes. V3 defines polygons objects to define regions within a closed loop. Polygons can be used to draw complex shapes, including circles. Earlier we were using 361 based point polygon to draw circle. Rather, using Google circle MVC class made our job much easier. Following code depends on global draw_circle. If its empty it draws a circle and assign it otherwise removes the existing circle and redraw with new details. Older Approach: To draw circle, we need to define a google map polygon object (Assuming the basic pre requisites of google map object and div being defined). Taking a center we take 361 points on the circle perimeter. Using the following function we calculate the lat lng coordinates for these points and draw the circle. The variable draw_circle stores the information of these 361 points. This function redraws the circle if no coordinates are already present in draw_circle.
var map; // map object

var radius; // Radius of circle in miles.

var center; // LatLng of center point of circle

var draw_circle = null;  // object of google maps polygon for redrawing the circle
 function DrawCircle(rad) {

	rad *= 1600; // convert to meters if in miles
	if (draw_circle != null) {
		draw_circle.setMap(null);
	}
	draw_circle = new google.maps.Circle({
		center: center,
		radius: rad,
		strokeColor: "#FF0000",
		strokeOpacity: 0.8,
		strokeWeight: 2,
		fillColor: "#FF0000",
		fillOpacity: 0.35,
		map: map
	});
}
// old code for if something similar is to be used in V2
/* function DrawCircle(rad) { // radius of the circle
var d2r = Math.PI / 180;
circleLatLngs = new Array(); // latLngs of circle
var circleLat = (rad /3963.189) / d2r; // miles
var circleLng = circleLat / Math.cos(center.lat() * d2r);
// Create polygon points (extra point to close polygon)
for (var i = 0; i < 361; i++) {
// Convert degrees to radians
var theta = i * d2r;
var vertexLat = center.lat() + (circleLat * Math.sin(theta));
var vertexLng = center.lng() + (circleLng * Math.cos(theta));
var vertextLatLng = new google.maps.LatLng(
parseFloat(vertexLat), parseFloat(vertexLng));
circleLatLngs.push(vertextLatLng);
}
if (draw_circle == null) { // no existing circle
draw_circle = new google.maps.Polygon({
paths: circleLatLngs,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
draw_circle.setMap(map);
}
else { // replace existing circle. if any
var vertices = draw_circle.getPath();
// Iterate over the vertices.
for (var i = vertices.length-1; i > -1; i--) {
vertices.removeAt(i);
}
for (var i in circleLatLngs) {
vertices.insertAt(i, circleLatLngs[i]);
}
}
}
*/

Generated Map: Circle with specified radius on Google Maps