How to detect that a point is inside a Polygon using Google Maps?

I would like to detect that a google.maps.LatLng is inside开发者_C百科 a google.maps.Polygon.

How can I do that ?

Cheers,

---

You can use this in google map V3:-

google.maps.geometry.poly.containsLocation(google.maps.LatLng(latitude, longitude),polygons);

polygons is a object returned by function after polygoncomplete.

var polygons=null;
google.maps.event.addDomListener(drawingManager, "polygoncomplete", function(polygon) {
        polygons=polygon;
});

reference by https://developers.google.com/maps/documentation/javascript/reference

---

Other solution: Google-Maps-Point-in-Polygon

A Javascript Google Maps v3 extension for the Polygon class to detect whether or not a point resides within it...

---

Google provides their own implementation within the geometry library, which I haven't checked, but presumably covers the edge cases discussed in the other answers.

See the containsLocation method described here. Note that you will have to import the geometry library explicitly, as it is not in the base map API

---

I used this algorithm to detect that the point is inside the polygon : http://alienryderflex.com/polygon/

I added a new method contains to the Polygon :

// Add a function contains(point) to the Google Maps API v.3

google.maps.Polygon.prototype.contains = function(point) {
  var j=0;
  var oddNodes = false;
  var x = point.lng();
  var y = point.lat();

  var paths = this.getPath();

  for (var i=0; i < paths.getLength(); i++) {
    j++;
    if (j == paths.getLength()) {j = 0;}
    if (((paths.getAt(i).lat() < y) && (paths.getAt(j).lat() >= y))
    || ((paths.getAt(j).lat() < y) && (paths.getAt(i).lat() >= y))) {
      if ( paths.getAt(i).lng() + (y - paths.getAt(i).lat())
      /  (paths.getAt(j).lat()-paths.getAt(i).lat())
      *  (paths.getAt(j).lng() - paths.getAt(i).lng())<x ) {
        oddNodes = !oddNodes
      }
    }
  }
  return oddNodes;
}

google.maps.Polyline.prototype.contains = google.maps.Polygon.prototype.contains;

---

Every method described here fails in one way or another.

The methods given by Andrei I and Natim do not consider polygons with geodesic edges. These methods also fail to realize that a non-geodesic edge in Google Maps is only straight within the Mercator projection. These methods assume the vertices lie on a equal distance lat/lon grid where one degree latitude equals one degree of longitude. As a result of this error, these methods will indicate a point is outside the polygon, while being displayed inside for some cases. This is easily observed for long non-vertical/non-horizontal edges. To resolve this issue, all points must first be converted from Latitude, Longitude to X, Y coordinates in the Mercator projection. Here is the method to convert the coordinates from lat/lon to x/y in Mercator. (Lacks accuracy) Rhumb line navigation can be used as a basis for an alternative method. Google Maps experimental version 3.10 implements this method.

The method mentioned by Paul Gibbs, swapnil udare, and Adi Lester does consider geodesic edges, but as of Google Maps v3.9 it uses the same method mentioned above for non-geodesic polygons. As such it also suffers from the same issue described above.

Update - The issue with Google Maps has been corrected in the current experimental version of Google Maps v3.10.

---

No need for complex algorithms, I was able to achieve this using isPointInPath() method of html canvas.

http://www.w3schools.com/tags/canvas_ispointinpath.asp

Create a canvas element. Draw a polygon with multiple endpoints using moveTo(),lineTo() methods. Verify if a point(x,y) lies inside the polygon using isPointInPath() method.

<canvas id="canvas"></canvas>

//x,y are coordinate of the point that needs to be tested
//coordinates contains all endpoint of a polygon in format of x1,y1,x2,y2,x3,y3....
function isPointInPolygon(x, y, coordinates) {
var ctx = canvas.getContext("2d");
var coords = coordinates.split(',');

if (coords != null && coords.length > 4) {
    ctx.beginPath();
    ctx.moveTo(coords[0], coords[1]);
    for (j = 2; j < coords.length; j++) {
        ctx.lineTo(coords[j], coords[j + 1]);
        j++;
    }
    ctx.closePath();
    if (ctx.isPointInPath(x, y))
        return true;
    else
        return false;
}
return false;
}