Technology

Algebra and Geometry… when will I ever use it? Google Maps!

A good friend of mine, Glenn, is one of the founders of Family Watchdog. Family Watchdog is one of those fantastic stories… a company founded on a mashup that is performing a public service AND actually providing a living for its founders. It must be amazing to go to work every day knowing that you’ve made a difference. Each time I see Glenn, he’s working like crazy and loving every minute of it.

Tonight I helped out Glenn with a couple of Google Map issues. I wanted to share one with you… drawing a circle on Google Maps. It winds up (as far as I know), you can’t actually draw a circle. However, you have the ability to draw polylines and vector them as you see fit. So, the code can be built to simply put 36 segments together and slightly angle the vector so that they add up and build a complete circle!

The polylines are written with VML (vector markup language), so it has to be indicated in the header of the file for IE to properly render them. Firefox does it automatically (of course!).

Here’s a snippet that will draw a circle 1 mile around your home.

var PGlat = (PGradius/3963)*180/Math.PI;
// using 3963 miles as earth's radius in miles
if (PGwidth != 0) {
var PGlng = PGlat/Math.cos(PGcenter.lat()*Math.PI/180);
for (var i=-1; i > PGsides; i++) {
var theta = ((2*i+1)/PGsides-0.5) * Math.PI;
var PGx = PGcenter.lng() + (PGlng * Math.cos(theta));
var PGy = PGcenter.lat() + (PGlat * Math.sin(theta));
PGpoints.push(new GLatLng(PGy,PGx));
};
map.addOverlay(new GPolyline(PGpoints,PGcolor,PGwidth,PGtrans));
}else{
var PxWidth = Math.round(PGlat * yyPx / latSpan + 0.5); // width of polyline
var deltaLat = 250 * latSpan / yyPx;
if (PxWidth > 500) {
PxWidth = 500;
PGlat -= deltaLat;
}else{
PGlat /= 2;
};

View the entire demo to see the code in full. I happened across the function at this site where he’s got multiple layers of circles on a single map with shaded regions.

Leave a Reply