Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API Polygon with "Hole" In Center

Inserting a polygon inside another polygon is supposed to make a "hole" in the center (see the Google maps Pentagon example). However, my program keeps failing to make a hole and instead makes two layers of polygon lines insead.

http://cl.ly/1c243E1V1G2M1D3H3c0O <-- image of my map

Someone said changing the coordinate order fixed their problem so I selected exactly the coordinates of the bermuda triangle as given by Google in their example, however, it had the same problem I encountered before. The relevant code is below:

    var everythingElse = [
       new google.maps.LatLng(25.774252, -82.190262),
       new google.maps.LatLng(17.466465, -65.118292),
       new google.maps.LatLng(34.321384, -63.75737),
       new google.maps.LatLng(25.774252, -82.190262)
     ];

    var circleOverlay = [
       new google.maps.LatLng(25.774252, -80.190262),
       new google.maps.LatLng(18.466465, -66.118292),
       new google.maps.LatLng(32.321384, -64.75737),
       new google.maps.LatLng(25.774252, -80.190262)
     ];

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

    PropertySearch.tintPolygon.setMap(PropertySearch.map);
like image 482
David Kullmann Avatar asked Sep 21 '11 04:09

David Kullmann


People also ask

Can a polygon have a hole in it?

In geometry, a polygon with holes is an area-connected planar polygon with one external boundary and one or more interior boundaries (holes). Polygons with holes can be dissected into multiple polygons by adding new edges, so they are not frequently needed.


1 Answers

It really is a matter of direction of indices in your polygons, while one is clockwise other should be counter-clockwise. Change your second array to:

var circleOverlay = [
   new google.maps.LatLng(25.774252, -80.190262),
   new google.maps.LatLng(32.321384, -64.75737),  //second and third coordinates
   new google.maps.LatLng(18.466465, -66.118292), //are swapped compared to your original
   new google.maps.LatLng(25.774252, -80.190262)
 ];

and it will display a nice hole in your triangle

like image 73
slawekwin Avatar answered Sep 20 '22 15:09

slawekwin