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)
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.