Draw radius around a point in Google map

Question

I'm using the Google Maps API and have added markers. Now I want to add a 10 mile radius around each marker, meaning a circle that behaves appropriately while zooming. I have no idea how to do that and it seems it's not something common.

I found one example that looks good, and you can have a look at Google Latitude, too. There they use markers with a radius, just like I want them.

Update: Google Latitude uses an image that is scaled, how would that work? _{^{(feature deprecated)}}

Answer 1

Using the Google Maps API V3, create a Circle object, then use bindTo() to tie it to the position of your Marker (since they are both google.maps.MVCObject instances).

// Create marker  var marker = new google.maps.Marker({   map: map,   position: new google.maps.LatLng(53, -2.5),   title: 'Some location' });  // Add circle overlay and bind to marker var circle = new google.maps.Circle({   map: map,   radius: 16093,    // 10 miles in metres   fillColor: '#AA0000' }); circle.bindTo('center', marker, 'position'); 

You can make it look just like the Google Latitude circle by changing the fillColor, strokeColor, strokeWeight etc (full API).

See more source code and example screenshots.

Answer 2

It seems that the most common method of achieving this is to draw a GPolygon with enough points to simulate a circle. The example you referenced uses this method. This page has a good example - look for the function drawCircle in the source code.