JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="imageholder"></div>
<div id="urllen"></div>
<div id="info"></div>
<div id="panel">
    <div id="color-palette"></div>
    <div>
        <button id="delete-button">Delete Selected Shape</button>
    </div>
</div>
<input type="button" value="create Static Map" onclick="createStaticMap()" />
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="staticMap"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
#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 geocoder;
var map;
var overlays = [];
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};

function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        center: new google.maps.LatLng(-27.37777, -51.592762),
        zoom: 16
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    google.maps.event.addListener(map, 'click', function (evt) {
        document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6);
    });

    var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
    };

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.MARKER,
            google.maps.drawing.OverlayType.CIRCLE,
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.POLYLINE,
            google.maps.drawing.OverlayType.RECTANGLE]
        },
        markerOptions: {
            icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
            draggable: true
        },
        polylineOptions: {
            editable: true
        },
        rectangleOptions: polyOptions,
        circleOptions: polyOptions,
        polygonOptions: polyOptions
    });
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (ovrly) {
        if (ovrly.type != google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);

            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
           ...