JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&amp;ext=.js"></script>
<div id="info"></div>
<div id="map_canvas" style="width:100%; height:100%"></div>

CSS

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

JavaScript

var G = google.maps;
var zoom = 8;
var centerPoint = new G.LatLng(37.286172, -121.80929);
var map;


$(function() {
  // create options object
  var myOptions = {
    center: centerPoint,
    zoom: zoom,
    mapTypeId: G.MapTypeId.ROADMAP
  };

  // create map with options
  map = new G.Map($("#map_canvas")[0], myOptions);

  addPolygon(map);
  var centerMark = new G.Marker({
    map: map,
    icon: {
      path: G.SymbolPath.CIRCLE,
      scale: 5,
      strokeWeight: 1,
      strokeColor: 'black',
      fillColor: 'white',
      fillOpacity: 1
    },
    title: "center",
    position: centerPoint
  })
});


function addPolygon(map) {
  var paths = [
    [new G.LatLng(37.686172, -122.20929),
      new G.LatLng(37.696172, -121.40929),
      new G.LatLng(36.706172, -121.40929),
      new G.LatLng(36.716172, -122.20929),
      new G.LatLng(37.686172, -122.20929)
    ],

    [new G.LatLng(37.486172, -122.00929),
      new G.LatLng(37.086172, -122.00929),
      new G.LatLng(37.086172, -121.60929),
      new G.LatLng(37.486172, -121.60929),
      new G.LatLng(37.486172, -122.00929)
    ]
  ];

  poly = new G.Polygon({
    clickable: false,
    paths: paths,
    map: map
  });
  polygonBinder(poly);
  poly.setEditable(true);
  // G.event.addListener(poly.getPaths().getAt(0), 'set_at', addClickMarker0);
  G.event.addListener(poly.getPaths().getAt(0), 'insert_at', addClickMarker0);
  // G.event.addListener(poly.getPaths().getAt(1), 'set_at', addClickMarker1);
  G.event.addListener(poly.getPaths().getAt(1), 'insert_at', addClickMarker1);
}

function polygonBinder(poly) {
  poly.binder0 = new MVCArrayBinder(poly.getPaths().getAt(0));
  poly.binder1 = new MVCArrayBinder(poly.getPaths().getAt(1));
  poly.markers = [];
  for (var i = 0; i < poly.getPaths().getLength(); i++) {
    poly.markers[i] = [];
    for (var j = 0; j < poly.getPaths().getAt(i).getLength(); j++) {
      var mark = new G.Marker({
        map: map,
        icon: {
          path: G.SymbolPath.CIRCLE,
     ...