I'm using the code below to draw a polygon and print it on the map:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -22.563923,
lng: -44.1682872
},
zoom: 18,
});
var triangleCoords = [{
lat: -22.563364,
lng: -44.168448
},
{
lat: -22.563663,
lng: -44.169476
},
{
lat: -22.564681,
lng: -44.168978
},
{
lat: -22.564388,
lng: -44.167884
},
{
lat: -22.563364,
lng: -44.168448
}
];
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: 'blue',
strokeOpacity: 0.8,
strokeWeight: .5,
fillColor: 'blue',
fillOpacity: .2
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(map, 'click', function (e) {
var resultColor =
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: e.latLng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
});
}
However, what I need is that when I click (or when a new point is added based on a array
) I know if it is outside or inside the polygon area.
The code was working, but stopped working when adding the line bermudaTriangle.setMap(map);
because it draws an object on the map.
How can I tell if the point is inside or outside the polygon?