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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments