Google map circles are not round

Question

I am trying to draw a lot of circles on a Google map (many circles on the roof).

I tried the Circle class and it looks good for large circles, but when drawing small circles they are not rounded at all.

The code I use is as follows:

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:

I know there are other ways to draw dots above the google map, but I would really like to go with a google solution if there is a way to get them to look back at how they should be.

Answer 1

You can use Symbols, they should be perfect circles. Try the following:

 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 understand it.

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

Answer 2

Smoothing is critical.

g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)

Google’s solution will not work for small circles.