JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var map;

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var bounds = new google.maps.LatLngBounds();
var triangleCoords = [
    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.774252, -80.190262)
];
var triangleCoords1 = [
    new google.maps.LatLng(29,-69),
    new google.maps.LatLng(25,-70),
    new google.maps.LatLng(23,-72),
    new google.maps.LatLng(29,-69)

];
    for (var i=0;i<triangleCoords.length;i++) {
        bounds.extend(triangleCoords[i]);
    }
for (var i=0;i<triangleCoords1.length;i++) {
        bounds.extend(triangleCoords1[i]);
    }
    map.fitBounds(bounds);
    
bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords, triangleCoords1],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);