google maps circle overlay - fixed size

Question

I'm trying to add a circle overlay to a map in my mvc project, but I'd like the circle to stay the same size if a user zooms in or out of the map - anyone know if this is possible? Currently this is how I'm displaying my circles giving different colors to each one.

var mapCircle;
var count = 0;

var colours = [];
@foreach (string s in arrColours)
{
    <text>colours.push('@s');</text>;
}

for (var point in map) {   
    var circle = {
        strokeColor: '#777777',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: colours[count],
        fillOpacity: 0.8,
        map: map,
        center: pointMap[point].coords,
        radius: 70000
    };
    mapCircle = new google.maps.Circle(circle);
    count++;
}

I have polylines that link between these points and they stay at a fixed width when you zoom in on the map, but the circle increases when you zoom in, which doesn't work for it's purpose. I know I could use images for markers, but I'd rather just use a circle if I can.

Thanks

Answer 1

It's possible but probably not easy to do. You'd need to check for a map zoom change and reset the circle's radius in meters using the Great Circle Distance Formula.

 google.maps.event.addListener(map, 'zoom_changed', resetRadius);

The question and the answer's below describe how to do this for a map, but should work for a circle. Circle's have both getBounds() and setRadius() methods.

Radius of "viewable" region in google maps v3

https://stackoverflow.com/a/3527136/1211981