JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas 
{ 
height: 400px; 
width: 500px;
}

JavaScript

function initialize() {
    
    var map_options = {
            zoom: 6,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
    map = new google.maps.Map( document.getElementById( 'map-canvas' ), map_options );   
}

function create_polygon(coordinates) {
    var icon = {
        //path: google.maps.SymbolPath.CIRCLE,
        path: "M -1 -1 L 1 -1 L 1 1 L -1 1 z",
        strokeColor: "#FF0000",
        strokeOpacity: 0,
        fillColor: "#FF0000",
        fillOpacity: 1,
        scale: 5
    };

     var polygon = new google.maps.Polygon({
        map: map,
        paths: coordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.5,
        zIndex: -1
    });

    var marker_options = {
        map: map,
        icon: icon,
        flat: true,
        draggable: true,
        raiseOnDrag: false
    };
    
    for (var i=0; i<coordinates.length; i++){
        marker_options.position = coordinates[i];
        var point = new google.maps.Marker(marker_options);
        
        google.maps.event.addListener(point, "drag", update_polygon_closure(polygon, i));
    }
    
    function update_polygon_closure(polygon, i){
        return function(event){
           polygon.getPath().setAt(i, event.latLng); 
        }
    }
};

initialize();


var corners = [[2, 0.63],
               [1, 0.63],
               [0.5, 1.5],
               [1, 2.37],
               [2, 2.37],
               [2.5, 1.5]
              ];
var coordinates = [];

for (var i=0; i<corners.length; i++){
    var position = new google.maps.LatLng(corners[i][0], corners[i][1]);
        
    coordinates.push(position);        
    }

create_polygon(coordinates);