google maps polygons - overlay

Question

I am attempting to implement a "negative" overlay on my google maps, similar to the effect that you get at estately.com. Basically, I have successfully drawn up mapping polygons from the KML data I've gathered. When there are multiple paths, they draw up just fine.

So, modeling the example I have, first I create a set of polyLines around my area from polygonCoords (which is an array of arrays of LatLng objects):

for (var d = 0 ; d < polygonCoords.length ; d++) 
{
  var b = new google.maps.Polyline( {
                                    path: polygonCoords[d],
                                    strokeWeight: 4,
                                    strokeColor: "#4F6D8F",
                                    strokeOpacity: 1,
                                    map: map
                                   });
}

I have a "negative space" polygon defined by:

function negativeSpaceBoundary()
{
  return [new google.maps.LatLng(10, -170), 
          new google.maps.LatLng(10, -50), 
          new google.maps.LatLng(80, -50), 
          new google.maps.LatLng(80, -170), 
          new google.maps.LatLng(10, -170)]
};

So, I unshift that negative space polygon into my polygonCoords array, and attempt to draw the polygon:

negativeSpace = new google.maps.Polygon( {
                                           path: polygonCoords,
                                           strokeWeight: 0,
                                           strokeOpacity: 1,
                                           strokeColor: "#4F6D8F",
                                           fillColor: "#000000",
                                           fillOpacity: 0.2,
                                           clickable: false,
                                           map: map
                                         });

Basically, what I'm hoping will happen is that my initial set of polyLines will "punch a hole" in the negative space polygon, so that there is essentially no overlay covering my city boundary. If you go to estately.com, and search for "Paradise Valley, AZ", you can see the effect.

I have tried several variations (Polygons vs Polylines, different fill colors and opacities, etc), but nothing achieves the effect displayed in my sample.

Any ideas? Using the v3 API, BTW.

Thanks, Andy

Answer 1

Both paths need to be in the same polygon. The inner hole path winding direction needs to be opposite the outer path.

http://www.geocodezip.com/v3_polygon_example_donut.html

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_nosidebar.html?lat=37.155939&lng=-79.497071&zoom=6&type=m&filename=http://www.geocodezip.com/geoxml3_test/virginia_inverted_kml.xml

Your polygon (all of the "holes" seem to be the same).