Join circles in Google Maps

Question

I would like to be able to draw several circles on a Google Map using javascript, but combine them as a “single shape” so that their areas do not overlap but divide. For example, I found this example on WalkScore.com:

You can see that they are COMBINING circles, and do not overlap them as separate shapes.

Is it possible? (Obviously this looks like it, but how?)

Answer 1

You can use Polygon as indicated here .

Check out the fiddle inspired by this solution.

The most important part is the union of circles:

var joined = new google.maps.Polygon({ paths: [drawCircle(smallOne, 150/1609.344, 1), drawCircle(bigOne, 300/1609.344, 1)], strokeColor: "#ff0000", strokeOpacity: 0.35, strokeWeight: 0, fillColor: "#FF0000", fillOpacity: 0.35 }); joined.setMap(map); 

Answer 2

You can cross polygons, perhaps try topojson.