JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,drawing&ext=.js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
$(document).ready(function() {
var mapHeight = '400px';
// $('#map-canvas').css('height', mapHeight);
mymap = new GMaps({
div: '#map-canvas',
lat: -38.143644,
lng: 144.360331,
zoom: 20,
zoomControl: true,
mapTypeId: 'satellite'
});
var map = mymap.map;
var map_drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYGON
]
},
//drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true,
},
polylineOptions: {
editable: true
},
map: map
});
var polygonArray=[];
google.maps.event.addListener(map_drawingManager, 'polygoncomplete', function (polygon) {
polygonArray.push(polygon);
});
google.maps.event.addListener(map_drawingManager, 'markercomplete', function (marker) {
polygonArray.forEach(function(polygon) {
if(google.maps.geometry.poly.containsLocation(marker.getPosition(), polygon)) {
console.log('Marker added inside polygon',polygon);
}
});
});
});