Use Google’s “magical blue circle”

If you are familiar with Google Maps for mobile, you have properbly used the “My Location” feature. This feature utilizes the cell identification in order to approximate your location information without using a GPS. The outcome will be your approximate location on a map, surrounded by a blue circle showing the inaccuracy of your position. So, if you are interested in how to use this “blue circle” feature on your own Google maps project, you might find this post useful!

In my current project (master’s thesis), I wanted to show a similar blue circle (1 km radius) surrounding my current location on the map. It seems, that the “blue circle” feature is not available for developers through the the Google maps API, therefore you have to draw the circle yourself. I spend some time looking for others with the same issue, but it was very difficult to find a solution (implementation example) among all the blogs describing the feature and not how to simulate the circle yourself.

Finally, as I was about to give up on the circle I found a working example on my issue. Actually, a GREAT example. So, here you go!

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
function initialize() {
 // Google Map API
 if ( GBrowserIsCompatible() ) {
 map = new google.maps.Map2(document.getElementById('map'));
 map.setCenter(new GLatLng(25.036772,121.520269), 10);
 draw(5, 36);
 }
 else {
 alert('Google Map');
 } }

////pan and zoom to fit
var bounds = new GLatLngBounds();
function fit(){
 map.panTo(bounds.getCenter());
 map.setZoom(map.getBoundsZoomLevel(bounds));
}

//calling circle drawing function
function draw(givenRad, givenQuality){
 map.clearOverlays();
 bounds = new GLatLngBounds();
 var centre = map.getCenter()
 drawCircle(centre, givenRad, givenQuality);
 fit();
}

///////////////// The Circle ////////////////////
function drawCircle(center, radius, nodes, liColor, liWidth, liOpa, fillColor, fillOpa)
{
// Esa 2006
 //calculating km/degree
 var latConv = center.distanceFrom(new GLatLng(center.lat()+0.1, center.lng()))/100;
 var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng()+0.1))/100;

 //Loop
 var points = [];
 var step = parseInt(360/nodes)||10;
 for(var i=0; i<=360; i+=step)
 {
 var pint = new GLatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() +
 (radius/lngConv * Math.sin(i * Math.PI/180)));
 points.push(pint);
 bounds.extend(pint); //this is for fit function
 }
 fillColor = fillColor||liColor||"#0055ff";
 liWidth = liWidth||2;
 var poly = new GPolygon(points,liColor,liWidth,liOpa,fillColor,fillOpa);
 map.addOverlay(poly);
}

The code sample above is found at this page (ESA), which also provides some other nice examples using the Google maps API here.
Enjoy making your own circles, hope you found this post useful.

Advertisement

Tags: Blue circle on Google Maps, Google blue circle, Google Maps, Google Maps API blue circle, Google maps circle, Google own circle implementation, Magical Blue Circle