I have drawn a polygon on Google Maps. But I am unable to verify whether a point exists within that area. How can I achieve this? Any suggestion would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Polygon</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=my_API_key&sensor=false&libraries=geometry"></script>
<script>
var centerPoint = new google.maps.LatLng(22.65, 88.45);
var centerPoint2 = new google.maps.LatLng(28.3, 86.3167);
var centerPoint3 = new google.maps.LatLng(22.65, 88.45);
var centerPoint4 = new google.maps.LatLng(20.6333, 84.3167);
var centerPoint5 = new google.maps.LatLng(24.6333, 85.3167);
function Initialize() {
var mapProp = {
center: centerPoint,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("MyMap"), mapProp);
var marker = new google.maps.Marker({
position: centerPoint,
animation: google.maps.Animation.BOUNCE
});
var myTrip = [centerPoint2, centerPoint3, centerPoint4];
var flightPath = new google.maps.Polygon({
path: myTrip,
strokeColor: "#0000FF",
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: "#B0F0FF",
fillOpacity: 0.4,
editable: true
});
marker.setMap(map);
flightPath.setMap(map);
var locationExists = new google.maps.geometry.poly.containsLocation({
point: centerPoint5,
polygon: flightPath
});
document.getElementById("MyData").innerHTML = locationExists;
}
google.maps.event.addDomListener(window, 'load', Initialize);
</script>
</head>
<body>
<div id="MyMap" style="height: 500px; width: 500px;"></div>
<div id="MyData" style="height: 500px; width: 500px;"></div>
</body>
Is the containsLocation() used properly? If not please suggest.
Use google.maps.geometry.poly.containsLocation
Note: the geometry-library isn’t loaded by default, you must load it by using the libraries-parameter of the maps-api