Question

I have the code below:

while p < points.length
  locs = points[p]
  latLng = [] 
  i = 0
  len = locs.length

  while i < len
    point = locs[i]
    latLng.push new google.maps.LatLng(point[0], point[1])
    i++
  marker = new google.maps.Polygon(
   paths: latLng
   fillColor: "#000000",
   fillOpacity: 0
   map: @gMap
  )
  markers.push(marker)
  p++

Which itterates through an array drawing lots of seperate polygons. It works really well. However when I try an introduce a “container polygon” that the many polygons will make holes in I am stumped. I understand the demo here…

PropertySearch.tintPolygon = new google.maps.Polygon({
     paths: [ everythingElse, circleOverlay ],
    strokeColor: "#000000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#000000",
    fillOpacity: 0.5
});

I get that you can have two paths. However I loop over my polygon builder so what I get is a very black map as it keeps redrawing he container.

What I am trying to get to is a 0.5 opacity container that has holes which are the smaller polygons being iterated over.
Edit 1:
If I use only one shape I can get the desired effect its for these multiple shapes. I think I need to move all the paths into their own Variable then place those into the map?

Answer 1

I can’t see how you are constructing the polygon in your code snippets.

However, for a polygon with holes, each of the separate paths needs to be an entry in the array defining the polygon. For a polygon with four holes, you need to define five paths within the one polygon.

For the holes to appear correctly in browsers which support Canvas graphics, it’s necessary to consider the winding direction: each hole should be defined in the reverse direction to the polygon which contains it. That is, for a containing polygon defined by points progressing clockwise, each of the holes it contains needs to be defined anti-clockwise.