I've got a map with multiple circles crossing each other (bellow is an example with only two but it's about 100 circles at least). When they cross, opacity is doubled, so when i have a cross between 5 or 6 circles it just become about 100% opacity.

Is there a way to allow make the 2nd circle not showing "over" the first one ? Actually a don't think so but maybe someone already expected something like this...

LEFT : What i have ---------------------------------------------- RIGHT : what i want

Just in case you wanna play : /

var populationOptions = {
      strokeWeight: 0,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);

Thanks for your help ;)

I've got a map with multiple circles crossing each other (bellow is an example with only two but it's about 100 circles at least). When they cross, opacity is doubled, so when i have a cross between 5 or 6 circles it just become about 100% opacity.

Is there a way to allow make the 2nd circle not showing "over" the first one ? Actually a don't think so but maybe someone already expected something like this...

LEFT : What i have ---------------------------------------------- RIGHT : what i want

Just in case you wanna play : http://jsfiddle.net/ZWt6w/

var populationOptions = {
      strokeWeight: 0,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);

Thanks for your help ;)

• javascript
• google-maps
• google-maps-api-3

• 1 Interesting problem and well-developed question. ..my only thought is you might consider merging the micro geometries into a larger macro geometry--in GIS we'd call this a Dissolve function. Without knowing your server-side technologies it's difficult to point you in a direction. You could approximate a solution client-side, but I think it would be a tedious exercise. – elrobis Commented Apr 18, 2014 at 15:40

3 Answers 3

With One Polygon draw with multiple paths ---------- With multiples circles drawn

@david strachan answer solved a big part of my question. Here is a part of this solution : first you must use this "drawCircle" function instead of the Circle object of Google Maps API V3 :

function drawCircle(point, radius, dir)
{ 
    var d2r = Math.PI / 180;   // degrees to radians 
    var r2d = 180 / Math.PI;   // radians to degrees 
    var earthsradius = 3963; // 3963 is the radius of the earth in miles
    var points = 32; 

    // find the raidus in lat/lon 
    var rlat = (radius / earthsradius) * r2d; 
    var rlng = rlat / Math.cos(point.lat() * d2r); 

    var extp = new Array(); 
    if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the
    else{var start=points+1;var end=0}
    for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
    {
        var theta = Math.PI * (i / (points/2)); 
        ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
        ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
        extp.push(new google.maps.LatLng(ex, ey));
    }
    return extp;
}

This function returns paths, so you can use it to buid an array of paths wich you will use after to build a single Polygon object :

var polys = [] ;
$(xml).find("trkpt").each(function() { // Parsing every points of my track
    var p = new google.maps.LatLng($(this).attr("lat"), $(this).attr("lon"));
    points.push(p);
    if ( ( i++ % 10 ) == 0 ) // Only display a circle every 10 points
    {
        polys.push(drawCircle(p,radius/1609.344,1)) ; // Radius value is in meters for me, so i divide to make it in miles
    }
});


peanutcircle = new google.maps.Polygon({
    paths: polys,
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: color,
    fillOpacity: 0.35,
});
peanutcircle.setMap(map);

And this is all, you've drawn a complex, but single polygon, probably easier to use.

Only problem for me is that checking markers contained in this single polygon (with google function containsLocation and github.com/tparkin/Google-Maps-Point-in-Polygon) is not working good, so i had to continue using my multiples circles to check if markers are in my zone.

Thank @david strachan for his answer.

Using Polygon class you can get the overlap opacity to be single.

var peanut = new google.maps.Polygon({
                 paths: [drawCircle(citymap['chicago'].center, citymap['chicago'].population/3000, 1),//division by 3000 to suit
                        drawCircle(citymap['losangeles'].center,citymap['losangeles'].population/3000, 1)],
                 strokeColor: "#ff0000",
                 strokeOpacity: 0.35,
                 strokeWeight: 0,
                 fillColor: "#FF0000",
                 fillOpacity: 0.35
     });
     peanut.setMap(map);

I have a similar problem, but my overlays are irrigular shape rusters. The ellips in the following example are just to demonstrate the issue but the actual rasters are shapes of any form but having all the same colour:

<!DOCTYPE html><html><head>
<title>Multi-Raster</title>
<style type="text/css">html { height: 100% }body { height: 100%}</style>
<script language="javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">
var map;
function initialize() {
var coord = new google.maps.LatLng( 45.4931831359863,-73.6133499145508);
var myOptions = {zoom:  10,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 44.59386,-74.89627), new google.maps.LatLng( 46.39251,-72.33043));
rmap1 =new google.maps.GroundOverlay("scrap.png", boundaries1);
rmap1.setMap(map);
rmap2 =new google.maps.GroundOverlay("scrap2.png", boundaries1);
rmap2.setMap(map);
 }
function showcov(m,v){if(v.checked) {m.setOpacity(0);m.setMap(map); }else {m.setMap(null);m.setOpacity(100);}}
</script></head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;height:100%"></div>
</form></td></tr></table></div></body></html>

raster1 raster2