JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="https://cdn.rawgit.com/seabre/simplify-geometry/master/simplifygeometry-0.0.2.js"></script>
<div id="map"></div>

<script src="//maps.google.com/maps/api/js?key=AIzaSyDciDh5LCPwyxG8tml6998d80mlukEj8Q4&libraries=drawing,places,geometry"></script>

CSS

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

JavaScript

// Init the map
var map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: 39.14,
    lng: -98.1,
  },
  zoom: 4,
});

var polyline;

var pointArray = [];

var cleanup = function() {
	polyline.setMap(null);
  drawPolygon();
}

var returnGeometry = function(points) {
  var arr = [];
  points.forEach((o, i) => {
    arr.push({
      lat: o[0],
      lng: o[1]
    });
  });
  return arr;
}

var drawPolygon = function() {
  var poly = new google.maps.Polygon({
    paths: returnGeometry(simplifyGeometry(pointArray, 0)),
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  poly.setMap(map);
}

var trackMouseMove = function() {
  polyline = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
	polyline.setMap(map);
  polyline.addListener('mouseup', function() {
  	cleanup();
  })
  pointArray = [];
  map.addListener('mousemove', function(e) {
  	var path = polyline.getPath();
    path.push(e.latLng);
    pointArray.push([e.latLng.lat(), e.latLng.lng()]);
  });
}

map.setOptions({
  draggable: false
});

map.addListener('mousedown', function() {
  trackMouseMove();
});

map.addListener('mouseup', function() {
	cleanup();
});