JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing&dummy=.js"></script>
<div id="map_canvas" style="width:100%; height:450px;"></div><form action="http://garbagedayreminder.com/test/save" method="post" accept-charset="utf-8" id="map_form"><input type="text" name="polygon" value="" id="polygon" /><input type="submit" name="save" value="Save!" id="save" /></form>
JavaScript
var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
function initialize() {
var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
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.POLYGON]
},
polygonOptions: {editable:true,fillColor:'#ff0000',strokeColor:'#ff0000',strokeWeight:2}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
var newShape = event.overlay;
newShape.type = event.type;
if (event.type==google.maps.drawing.OverlayType.POLYGON) {
overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false});
}
});
var polygon_plan_0 = [
new google.maps.LatLng(40.9534555976547, -74.0871620178223)
,
new google.maps.LatLng(40.9410084152192, -74.0948867797852)
,
new google.maps.LatLng(40.9411380854622, -74.1165161132812)
,
new google.maps.LatLng(40.9490474888751, -74.1221809387207)
,
new google.maps.LatLng(40.955140973234, -74.124584197998)
,
new google.maps.LatLng(40.9604561066844, -74.1153144836426)
,
new google.maps.LatLng(40.9534555976547, -74.0871620178223)
];
lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223));
lat_longs.push(new...