Google map circles are not round

google-maps, google-maps-api-3, html, javascript

Solution

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

Problem

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.

Original source