Is LatLng inside a polygon

Question

I have a typical polygon set on a google map with some latLng's:

var bermudaTriangle = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
  ]
});
bermudaTriangle.setMap(map);

these are the Bermuda Triangle coords from google's documentation. I also have some random coords, saaay:

var coord1 = new new google.maps.LatLng(26.194876675795218,-69.8291015625)
var coord2 = new new google.maps.LatLng(33.194876675795218,-63.8291015625)

the first one happens to be inside the triangle, and the second one outside. These are just examples though, what I need is a way to find out, if a provided coordinate (not just one of these 2, any coordinte) is inside or outside the polygon (also, not always the Bermuda Triangle, not even a triangle - the polygons can have any number of latLng's). I've looked through the Google Maps API documentation, but I couldn't find any function that provides an answer to this question.

Answer 1

Use the containsLocation(point:LatLng, polygon:Polygon) method.

containsLocation(point:LatLng, polygon:Polygon) boolean Computes whether the given point lies inside the specified polygon.

proof of concept fiddle

code snippet:

function checkInPolygon(marker, polygon) {
  var infowindow = new google.maps.InfoWindow();
  var html = "";
  if (google.maps.geometry.poly.containsLocation(marker.getPosition(), polygon)) {
    html = "inside polygon";
  } else {
    html = "outside polygon";
  }
  infowindow.setContent(html);
  infowindow.open(map, marker);
}

var map;
var coord1 = new google.maps.LatLng(26.194876675795218, -69.8291015625);
var coord2 = new google.maps.LatLng(33.194876675795218, -63.8291015625);

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  bermudaTriangle.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < bermudaTriangle.getPath().getLength(); i++) {
    bounds.extend(bermudaTriangle.getPath().getAt(i));
  }
  bounds.extend(coord1);
  bounds.extend(coord2);
  var marker1 = new google.maps.Marker({
    map: map,
    position: coord1
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: coord2,
  });
  map.setCenter(bounds.getCenter());
  map.setZoom(3);
  checkInPolygon(marker1, bermudaTriangle);
  checkInPolygon(marker2, bermudaTriangle);
}
google.maps.event.addDomListener(window, "load", initialize);

var bermudaTriangle = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
  ]
});

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Answer 2

If the Google Maps API doesn't have any methods specifically for this, then you'll need to find or write your own. It's a common problem in computer graphics, and if you Google "polygon hit testing" you'll find a wealth of information. This SO answer looks reasonably comprehensive.