JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

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


</script>

CSS

#map {
   height: 100%;
 }
 /* Optional: Makes the sample page fill the window. */
 
 html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
 }

JavaScript

function initMap() {
        
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: 24.886, lng: -70.268},
          mapTypeId: 'terrain'
        });

        // Define the LatLng coordinates for the polygon's path.
        var p1Coords = [
        	{lng:-175, lat:-80},
				 	{lng:12, lat:-80},
         	{lng:10, lat:18},
					{lng:8, lat:80},
					{lng:-175, lat:-80}
        ];
        
        // Construct the polygon.
        var p1 = new google.maps.Polygon({
          paths: p1Coords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        p1.setMap(map);
        
 // Define the LatLng coordinates for the polygon's path.
        var p2Coords = [
          {lng:175, lat:80},
					{lng:8, lat:80},
					{lng:10, lat:18},
					{lng:12, lat:-80},
					{lng:175, lat:80}
        ];
        
        // Construct the polygon.
        var p2 = new google.maps.Polygon({
          paths: p2Coords,
          strokeColor: '#00FF00',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#00FF00',
          fillOpacity: 0.35
        });
        p2.setMap(map);
}