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
  • http://pulse.yahoo.com/_NO4QHLWH3X7DTO7GADSAPVEP2A Vijay A

    radius in meters , miles?

    • http://twitter.com/scriblogs Scriblogs

      this is in miles, line 15 of above code.
      To convert it to meters, you will have to multiply result by 1609.344

      • http://twitter.com/enbake Enbake Consulting

        Yes,

        Scriblogs is right. The distance on line 15 is in miles !!!

        Thanks.

  • http://pulse.yahoo.com/_NO4QHLWH3X7DTO7GADSAPVEP2A Vijay A

    radius in meters , miles?

    • http://twitter.com/scriblogs Scriblogs

      this is in miles, line 15 of above code.
      To convert it to meters, you will have to multiply result by 1609.344

      • Anonymous

        Yes,

        Scriblogs is right. The distance on line 15 is in miles !!!

        Thanks.

  • Richard

    There is also the google.maps.Circle class to do this:
    http://code.google.com/apis/maps/documentation/javascript/reference.html#Circle

  • Richard

    There is also the google.maps.Circle class to do this:
    http://code.google.com/apis/maps/documentation/javascript/reference.html#Circle

  • http://twitter.com/enbake Enbake Consulting

    Thanks Richard. Used Circle class now.

  • Anonymous

    Thanks Richard. Used Circle class now.

  • http://vism.ag visualthinkmap

    hey,

    i’m a novice/beginner coder who’s dabbled in google maps and i am trying to do this circle overlay with a specific radius for places within a wlking distance to area. prob is i cant quite figure out how to implement the cod eyou provide to so that i can have a toggle button to view the circle overlay and i think somehow link to the set null to remove the circle again. do you have a link to a working example at a web page? it will help to view source and work out how it works, hopefully then adapt to my own map. i’m uing v3 of the api btw.

    looks good thanks

    • http://twitter.com/enbake Enbake Consulting

      for toggling on button press, you can use following to remove circle
      http://enbake.com/remove-circle-polygons-from-google-map-api-v3

      if you want new circle to be drawn calling above function will do the job changing the radius.

      If this still doesnt resolve, you can show us your code, I will try to fix it here or on contact form :)

      • http://vism.ag visualthinkmap

        hey thanks enbake. not sure how to call the function for it to attach to the geoxml3 markers. i put the ‘var draw_circle = null; ‘ in the function initialize, but i’m not sure how to load the cirlces around the markers.

        i havent wrote this code, i adapt (very minimally change) examples that i find. can the circles be loaded by a onclick rather than load.

        didnt think you’d want your blog post clogged up with lots of code, so i just shard a link:

        http://creativemaps.vism.ag/enbakecircle.htm

        (btw, not after back links or anything posting this link, sorry if the url effects your site)

        any help will be greatly appreciated.

        thanks chris

  • http://vism.ag visualthinkmap

    hey,

    i’m a novice/beginner coder who’s dabbled in google maps and i am trying to do this circle overlay with a specific radius for places within a wlking distance to area. prob is i cant quite figure out how to implement the cod eyou provide to so that i can have a toggle button to view the circle overlay and i think somehow link to the set null to remove the circle again. do you have a link to a working example at a web page? it will help to view source and work out how it works, hopefully then adapt to my own map. i’m uing v3 of the api btw.

    looks good thanks

    • Anonymous

      for toggling on button press, you can use following to remove circle
      http://enbake.com/remove-circle-polygons-from-google-map-api-v3

      if you want new circle to be drawn calling above function will do the job changing the radius.

      If this still doesnt resolve, you can show us your code, I will try to fix it here or on contact form :)

      • http://vism.ag visualthinkmap

        hey thanks enbake. not sure how to call the function for it to attach to the geoxml3 markers. i put the ‘var draw_circle = null; ‘ in the function initialize, but i’m not sure how to load the cirlces around the markers.

        i havent wrote this code, i adapt (very minimally change) examples that i find. can the circles be loaded by a onclick rather than load.

        didnt think you’d want your blog post clogged up with lots of code, so i just shard a link:

        http://creativemaps.vism.ag/enbakecircle.htm

        (btw, not after back links or anything posting this link, sorry if the url effects your site)

        any help will be greatly appreciated.

        thanks chris

  • Aybek Can Kaya

    thanks a lot.. your post really helped me a lot 
    Aybek

  • Vinoth Kumar

    Is it possible to change the Google Maps Drawing manager icons? 

    The below link i need to change custom icon. Please help me……….?

    Drawing Manager with Shape delete
    http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html