Google map circles are not round

Question

I am trying to draw many circles over a Google Map (many circles per rooftop).

I tried the Circle class and seem to be okay for big circles, but when drawing small ones they are not round at all.

The code I'm using goes like this:

for(var i = 0; i < latitudes.length; i++)
    var newCircle = new google.maps.Circle({
        strokeColor: "#FFFFFF",
        strokeOpacity: 0,
        strokeWeight: 1,
        fillColor: "#FFFFFF",
        fillOpacity: 1,
        map: map,
        center: new google.maps.LatLng(latitudes[i], longitudes[i]),
        radius: 0.5
    });
    newCircle.setMap(map);

And the result is:

I know that there are other ways to draw points over a google map, but I'd really like to go with the google solution if there is a way to make them look round as they should be.

Answer 1

You could use Symbols, they should be perfect circles. Try this:

var whiteCircle = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1.0,
    fillColor: "white",
    strokeOpacity: 1.0,
    strokeColor: "white",
    strokeWeight: 1.0,
    scale: 1.0
};

Then

for(var i = 0; i < latitudes.length; i++) {
    var latLng = new google.maps.LatLng(latitudes[i], longitudes[i])
    var newCircle = new google.maps.Marker({
        icon: whiteCircle,
        position: latLng
    });
    newCircle.setMap(map);
}

The circles are likely to be huge, so play around with the scale to get it right.

I have never used the Circle class. Symbols were introduced in this year's Google I/O. They are vectors, meaning you can pretty much define your own shape. Here's a link for more info: googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html