JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

<script src="https://maps.googleapis.com/maps/api/js?signed_in=false&libraries=drawing,geometry"></script>
<div id="map"></div>

CSS

html,
  body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  
  #map {
      height: 100%;
  }

JavaScript

var map, data, drawLayer, changedGeom;
data = {"type":"FeatureCollection","features":[{"type":"Feature","id":"1", "geometry":{"type":"Polygon","coordinates":[[[151.36001586914062,-33.773439833797745],[151.34628295898438,-33.98664113654012],[151.50283813476562,-33.91715274008259],[151.50146484375,-33.605469612271875],[151.36001586914062,-33.773439833797745]]]},"properties":{"ifeatureId":1}}]};

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -33.865143,
            lng: 151.209900
        },
        zoom: 10,
        clickableIcons: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false
    });
    changedGeom = null;

    drawLayer = map.data;
    drawLayer.setControls(['Polygon']);
    drawLayer.setStyle({
        editable: true,
        draggable: true
    });
    drawLayer.addListener('mouseup', function(e) {
	    console.log('mouseup: ' + e.feature.getId() + "@" + e.latLng.toString());
    });
//    bindDataLayerListeners(drawLayer);
    loadPolygons(drawLayer);
}

function bindDataLayerListeners(drawLayer) {
    console.log("bindDataLayerListeners");
    drawLayer.addListener('mouseup', function(e) {
	    console.log('mouseup: ' + e.feature.getId() + "@" + e.latLng.toString());
      // Workaround to prevent event from firing twice.
//      e.stop();
      // Make sure to only have one 'setgeometry' handler
/*      if (!changedGeom) {
        changedGeom = drawLayer.addListener('setgeometry', function(e) {
            console.log('setgeometry: got new geometry: ' + e.feature.getId());
            google.maps.event.removeListener(changedGeom);
            // We no longer listen to this event.
            changedGeom = null;
        });
      }*/
    });
/*    drawLayer.addListener('rightclick', function(e) {
        console.log('rightclick: deleted polygon: ' + e.feature.getId());
        google.maps.event.removeListener(changedGeom);
      	// We no longer...