JSFiddle - React, Tailwind, and code Playground

by apimenov93

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=drawing"></script>
<span id="tt">Test</span>
<span id="tt2">Test Sel</span>
<div id="panel">
<div>
<button id="zone1" class="zonal">Zone 1</button>
<button id="zone2" class="zonal">Zone 2</button>
<button id="zone3" class="zonal">Zone 3</button>
<button id="zone4" class="zonal">Zone 4</button>
</div>
      <div id="color-palette"></div>
      <div>
        <button id="delete-button">Delete Selected Shape</button>
      </div>
      <div>
        <input type="text" id="zInd"/>
      </div>
    </div>
    
    <div id="map"></div>
    <div id="mapOverlay" style="position:absolute;left:0;top:0;width:75%;height:100%;background-color:#fff;opacity:0.5;text-align:center">
        <h2 style="line-height:15em">Select A Zone</h2>
    </div>
<input type="hidden" class="hdAct" id="hdActive" value=""/>

CSS

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

      #panel {
        width: 200px;
        font-family: Arial, sans-serif;
        font-size: 13px;
        float: right;
        margin: 10px;
      }

      #color-palette {
        clear: both;
      }

      .color-button {
        width: 14px;
        height: 14px;
        font-size: 0;
        margin: 2px;
        float: left;
        cursor: pointer;
      }

      #delete-button {
        margin-top: 5px;
      }

JavaScript

var zVal = 999999999;
var polygons = [];
var curID = "";
$('#tt').click(function(){
var res = (selectedShape.getPath().getArray());
alert(res);
});

$('#tt2').click(function(){
	
});

$('.zonal').click(function(){
		var testid = $(this).attr('id');
    $('#mapOverlay').hide();
    $('#hdActive').val(testid);
    curID=testid;
});
var drawingManager;
var selectedShape;
      var colors = ['#1E90FF', '#32CD32', '#FF8C00', '#4B0082'];
      var selectedColor;
      var colorButtons = {};

      function clearSelection() {
        if (selectedShape) {
          selectedShape.setEditable(false);
          selectedShape = null;
        }
        
      }
      
      function checkIDSet(e,a){
      	e.preventDefault();
      	if($('#hdActive').val()==""){
        	alert('Please select a zone');
          return false;
        }
      }

      function setSelection(shape) {
        clearSelection();
        selectedShape = shape;
        shape.setEditable(true);
        selectColor(shape.get('fillColor') || shape.get('strokeColor'));
        $('#zInd').val(shape.get('id'));
        console.log(shape);
      }

      function deleteSelectedShape() {
        if (selectedShape) {
        	$('#'+selectedShape.id).attr("disabled", false);
          selectedShape.setMap(null);
        }
      }

      function selectColor(color) {
        selectedColor = color;
        for (var i = 0; i < colors.length; ++i) {
          var currColor = colors[i];
          colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
        }

        // Retrieves the current options from the drawing manager and replaces the
        // stroke or fill color as appropriate.
        var polylineOptions = drawingManager.get('polylineOptions');
        polylineOptions.strokeColor = color;
        drawingManager.set('polylineOptions', polylineOptions);

        var rectangleOptions = drawingManager.get('rectangleOptions');
        rectangleOptions.fillColor =...