JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outerDiv">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="outputDiv">Distance (meters): <input id="txtDistance" /></div>
<div id="map_canvas"></div>
</div>

CSS

#map_canvas {
    width: 500px;
    height: 400px;
    opacity: 1;
    float: left;
}

#outputDiv{
    float: right;
    margin-bottom: 20px;
}

.outerDiv{
    width: 500px;
}

JavaScript

var marker;
var Map;
var mapMarkers = new Array();

var rectangle = new google.maps.Rectangle();
var polyGon = new google.maps.Polygon();
var polyLine = new google.maps.Polyline();
var outlineMarkers = new Array();

var mapOptions = {
    center: new google.maps.LatLng(37.574361, -95.675294),
    panControl: true,
    zoom: 3,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    }
};

$(document).ready(function(){
    $('#map_canvas').animate({
        "opacity": 1
    });
    
    Map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    
    var isClosed = false;
    
    polyLine = new google.maps.Polyline({
        map: Map,
        path: [],
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    
    polyGon = new google.maps.Polygon({
        map: Map,
        path: [],
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        draggable: true
    });
    
    //ability to drag the polygon around
    google.maps.event.addListener(polyGon, "drag", function (dragEvent) {
        var polyGonPoints = this.getPath().getArray();
        $.each(polyGonPoints, function (index, val) {
            var polyGonPoint = val;
            outlineMarkers[index].setPosition(polyGonPoint);
        });
        //Hypothetical function that enters each point into textboxes (for form submission, for example) - I didn't write this function, but this is when you'd call it...
        //updateTxtPolygon();
    });
    /* //remove polygon on right-click?
    google.maps.event.addListener(polyGon, "rightclick", function (dragEvent) {
        removePolygon();
        
        //Hypothetical function - see above
        //updateTxtPolygon();
    });
    */

    google.maps.event.addListener(Map, "rightclick", function (event) {
        //event.preventDefault();
       
        var...