JSFiddle - React, Tailwind, and code Playground

by Noel Calonia

HTML

<div id="map"></div>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {
        lat: 24.886,
        lng: -70.268
      },
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var triangleCoords = [{
      lat: 25.774,
      lng: -80.190
    }, {
      lat: 18.466,
      lng: -66.118
    }, {
      lat: 32.321,
      lng: -64.757
    }, {
      lat: 25.774,
      lng: -80.190
    }];

    var bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);
  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

@media print {
  .gmnoprint a,
  .gmnoprint span,
  .gm-style-cc,
  .gmnoscreen,
  .gmnoscreen a,
  .gmnoscreen span {
    display: none;
  }
  .gmnoprint div {
    background: none !important;
  }
  a[title="Click Here to see this area on Google Maps"] {
    display: none;
  }
  a[title="Report problems with Street View imagery to Google"] {
    display: none;
  }
  a[title="Terms of Use"] {
    display: none;
  }
}