I have a polygon in google maps. And I want the line to stay within the polygon's borders. My current code works, but only if the polygon has a simple shape, no sharp (concave) edges. When there are sharp edges, the line will go over the borders:
here is the code:
var polyOptions = {
strokeColor: 'red',
strokeOpacity: 1.0,
strokeWeight: 3,
editable: true,
zIndex:2
};
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
bermudaTriangle.setMap(map);
google.maps.event.addListener(map, 'click', addLatLng);
google.maps.event.addListener(map, 'rightclick', drawPolygon);
}
var bermudaTriangle = new google.maps.Polygon({
strokeColor: 'orange',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'yellow',
fillOpacity: 0.35,
zIndex:1,
clickable:false,
editable:true
});
function addLatLng(event) {
var path = poly.getPath();
if(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle)){
path.push(event.latLng);
console.log(path);
}
}
function drawPolygon(event) {
var path = bermudaTriangle.getPath();
path.push(event.latLng);
}