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(13.466465, -66.118292),
    new google.maps.LatLng(12.466465, -62.118292),
     new google.maps.LatLng(14.466465, -52.118292),
    new google.maps.LatLng(32.321384, -64.75737),
              new google.maps.LatLng(25.774252, -80.190262)];

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

  shape.setMap(map);
  
  var bounds=new google.maps.LatLngBounds();
  for (i = 0; i < paths.length; i++) {
    bounds.extend(paths[i]);
  }
  
  var polyCenter = bounds.getCenter();
    
  var marker = new google.maps.Marker({
      position: polyCenter , 
      map: map, 
      title:"Center of bounds"
  });  
});