How to show the intersecting area of two polygons on Google maps?

Question

I am working on a project where I need to show the intersecting area of two polygons drawn on Google maps. I have gone through the maps API documentation. It does mention about intersecting polygons but has no examples or methods explained. Can any one help me out?

Answer 1

The example demonstrates how to determine and draw the intersecting area of two polygons

Prerequisite:

jsts library is utilized for calculating polygons intersection

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var bermudaCoords = [
    { lat: 25.774, lng: -80.190 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.190 }
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: bermudaCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Construct another polygon.
  var anotherCoords = [
    { lat: 25.774, lng: -85.101 },
    { lat: 35.406, lng: -85.101 },
    { lat: 35.406, lng: -54.127 },
    { lat: 25.774, lng: -60.010 }
  ];

  var anotherArea = new google.maps.Polygon({
    paths: anotherCoords,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35
  });
  anotherArea.setMap(map);



  //calc polygons intersection
  var geometryFactory = new jsts.geom.GeometryFactory();
  var bermudaPolygon = createJstsPolygon(geometryFactory, bermudaTriangle);
  var anotherPolygon = createJstsPolygon(geometryFactory, anotherArea);
  var intersection = bermudaPolygon.intersection(anotherPolygon);
  drawIntersectionArea(map, intersection);
}



function drawIntersectionArea(map, polygon) {
  var coords = polygon.getCoordinates().map(function (coord) {
    return { lat: coord.x, lng: coord.y };
  });

  var intersectionArea = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#00FF00',
    strokeOpacity: 0.8,
    strokeWeight: 4,
    fillColor: '#00FF00',
    fillOpacity: 0.35
  });
  intersectionArea.setMap(map);
}



function createJstsPolygon(geometryFactory, polygon) {
  var path = polygon.getPath();
  var coordinates = path.getArray().map(function name(coord) {
    return new jsts.geom.Coordinate(coord.lat(), coord.lng());
  });
  if(coordinates[0].compareTo(coordinates[coordinates.length-1]) != 0) 
      coordinates.push(coordinates[0]);
  var shell = geometryFactory.createLinearRing(coordinates);
  return geometryFactory.createPolygon(shell);
}


google.maps.event.addDomListener(window, 'load', initMap);

#map,
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>
<div id="map"></div>

JSFiddle