Determining if two polygons are overlapping in Google Maps?

I'm working with google maps and polygons, but I have to validate that polygons are not overlapping each other.

I have a function that returns TRUE when a point (lat, lng) is inside a polygon, but it's not enough to determine if every point of a polygon is inside another polygon.

Any suggestion?

Answer

JSFiddle Example

I've created a JSFiddle demonstrating a solution to your problem using the JavaScript Topology Suite (JSTS) (JSTS) library.

Explaination

There are two steps to this approach. The first step converts your Google geometries into WellKnownText (WKT) geometry expressions, which is a widely supported format. The second step uses JSTS to perform a JSTS geometry.intersects() comparison of two WKT geometries.

To really understand this you'll need to have a basic understanding of WKT. Because the polygon geometries in your Google Map are not widely supported format, I immediately convert them into WKT geometries so that we can work with them in JSTS.

To do this easily, I used the Wicket library. Of course you can always home-roll your own Google-Polygon-to-WKT method, or you're welcome to use one I wrote once upon a time, or you can use some other solution you might find. Personally, these days I just use Wicket, which as you can see, is wicked-simple:

// Pass in two Google Polygon objects.
// It returns two WellKnownText (WKT) geometry expressions.
// 
function UseWicketToGoFromGooglePolysToWKT( poly1, poly2 )
{
    var wicket = new Wkt.Wkt();

    wicket.fromObject(poly1);

    var wkt1 = wicket.write();

    wicket.fromObject(poly2);
    var wkt2 = wicket.write();

    return [wkt1, wkt2];
}

Next is the meat and potatoes--using JSTS to take two WKT geometries and test whether or not they intersect. Once again, relying on the library, there is not much to it:

// Pass in two WKT geometry expressions.

// It performs a JSTS intersects() comparison.
// 
function UseJstsToTestForIntersection( wkt1, wkt2 )
{
    // Instantiate JSTS WKTReader and get two JSTS geometry objects
    var wktReader = new jsts.io.WKTReader();
    var geom1 = wktReader.read(wkt1);
    var geom2 = wktReader.read(wkt2);

    if (geom2.intersects(geom1)) {

      alert('intersection confirmed!');
    } else {
      alert('..no intersection.');
    }
}

How I linked the libraries in the Fiddle

The fiddle linked above, and the solution I demonstrated requires adding two 3rd party libraries to your project--JSTS, and Wicket. Getting the code from their respective Githubs and incorporating it into your project is a different exercise. But for the fiddle, I linked to those libraries by referencing them in an existing JSTS example I found posted by Christopher Manning, as well as Wicket's own demo page. Basically I opened the pages, selected "View Source", and plucked relevant references to the two libraries. These were exact library endpoints I used:

http://arthur-e.github.io/Wicket/wicket.js
http://arthur-e.github.io/Wicket/wicket-gmap3.js

http://bl.ocks.org/christophermanning/raw/4450188/javascript.util.min.js
http://bl.ocks.org/christophermanning/raw/4450188/jsts.min.js