JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </head>

    <body>
        <div class="mapClass" id="mapDiv" ></div>
    </body>    
    
</html>

CSS

#mapDiv{
    border: solid 1px #959595;
    width: 500px;
    height: 580px;
    z-index: 1;
    position: absolute;
    right: 10px;
    top: 10px;
}

JavaScript

$(document).ready(function() {
    var mapDiv = document.getElementById('mapDiv');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var paths = [new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),new 		google.maps.LatLng(25.77423, -80.190234)];

  var shape = new google.maps.Polygon({
    paths: paths,
    strokeColor: '#ff0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#ff0000',
    fillOpacity: 0.35
  });

  shape.setMap(map);
    

  var polyCenter = GetCentroid(paths);
    
  var marker = new google.maps.Marker({
      position: polyCenter , 
      map: map, 
      title:"Center of bounds"
  });  
});

function GetCentroid(paths){
    var f;
    var x = 0;
    var y = 0;
    var nPts = paths.length;
    var j = nPts-1;
    var area = 0;
    
    for (var i = 0; i < nPts; j=i++) {   
        var pt1 = paths[i];
        var pt2 = paths[j];
        f = pt1.lat() * pt2.lng() - pt2.lat() * pt1.lng();
        x += (pt1.lat() + pt2.lat()) * f;
        y += (pt1.lng() + pt2.lng()) * f;
        
        area += pt1.lat() * pt2.lng();
        area -= pt1.lng() * pt2.lat();        
    }
    area /= 2;
    f = area * 6;
    return new google.maps.LatLng(x/f, y/f);
}