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}},
{"type":"Feature","id":"2", "geometry":{"type":"Polygon","coordinates":[[[151.46001586914062,-33.873439833797745],[151.44628295898438,-34.08664113654012],[151.60283813476562,-34.01715274008259],[151.60146484375,-33.705469612271875],[151.46001586914062,-33.873439833797745]]]},"properties":{"ifeatureId":2}}]};

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 = new google.maps.Data({
        map: map
    });
    drawLayer.setControls(['Polygon']);
    drawLayer.setStyle({
        editable: true,
        draggable: true
    });
    loadPolygons(drawLayer);
    bindDataLayerListeners(drawLayer);
}

function bindDataLayerListeners(drawLayer) {
    console.log("bindDataLayerListeners");
    drawLayer.forEach(function(feature) {
      feature.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.
   ...