How to combine circles in Google Maps

Question

I would like to be able to draw multiple circles on a Google Map with javascript, but combine them as a \"single shape\" so that their areas don\'t overlap, but are shared.

Answer 1

You can use a Polygon as stated here.

Check this fiddle inspired in that solution.

The most important part is combining the 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 intersect polygons maybe try topojson.