How to use containsLocation() in DrawingManager - google-maps

Question

google.maps.event.addListener(drawingManager, "polygoncomplete", function (polygon) {
document.getElementById("cordinates").innerHTML = polygon.getPath().getArray();
google.maps.event.addListener(polygon.getPath(), "insert_at", function () { document.getElementById("cordinates").innerHTML =polygon.getPath().getArray(); } )
google.maps.event.addListener(polygon.getPath(), "remove_at", function () { document.getElementById("cordinates").innerHTML =polygon.getPath().getArray(); } )
google.maps.event.addListener(polygon.getPath(), "set_at", function () { document.getElementById("cordinates").innerHTML = polygon.getPath().getArray(); } )
I have that code part, I want to check some points inside of that polygon or not, but I have tried google.maps.geometry.poly.containsLocation(point, polygon)
that code but I have problem polygon, I do not know how to call that polygon from drawingmanager. I don't know to find polygon's reference from drawingmanager

Answer 1

The following example demonstrates how to utilize google.maps.geometry.poly.containsLocation function:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var sydneyLoc = new google.maps.LatLng(-33.868220, 151.201211);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.MARKER,
//google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
//google.maps.drawing.OverlayType.POLYLINE,
//google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {icon: 'images/beachflag.png'},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
if(google.maps.geometry.poly.containsLocation(sydneyLoc, polygon) == true) {
document.getElementById('result').innerHTML = 'Sydney city is located inside your polygon';
}
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 320px;
}
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=drawing&callback=initMap"
async defer></script>
<div id="map"></div>
Info:<div id="result" />

Answer 2

I had the same scenario and fortunately I found the following working
Example
JavaScript
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 24.886, lng: -70.269},
zoom: 5,
});
var triangleCoords = [
{lat: 25.774, lng: -80.19},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function(e) {
var resultColor =
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
'blue' :
'red';
var resultPath =
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
// A triangle.
"m 0 -1 l 1 2 -2 0 z" :
google.maps.SymbolPath.CIRCLE;
new google.maps.Marker({
position: e.latLng,
map: map,
icon: {
path: resultPath,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
});
}
HTML
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
async defer></script>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}