JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
   <div id="map-canvas"></div>

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

var map, infoWindow;
function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

   var bounds = new google.maps.LatLngBounds();
  var polygons = [];
 var arr = new Array();
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Define the LatLng coordinates for the polygon's path.
  var coordinates = {
    "feed1": [
        [ 25.774252,  -80.190262 ],
        [18.466465,-66.118292 ],
        [32.321384, -64.75737],
        [25.774252, -80.190262 ]
    ],
    
     "feed2": [
        [26.774252, -81.190262],
        [ 19.466465, -67.118292 ],
        [33.321384,-65.75737 ],
        [26.774252, -81.190262 ]
    ],
    
     "feed3": [
        [27.774252, -82.190262],
        [ 20.466465, -68.118292 ],
        [34.321384,-66.75737 ],
        [27.774252, -82.190262 ]
    ]
};
   for (var i in coordinates) {
           arr = [];

   for (var j=0; j < coordinates[i].length; j++) {
              arr.push( new google.maps.LatLng(
                    parseFloat(coordinates[i][j][0]),
                    parseFloat(coordinates[i][j][1])
              ));
                
              bounds.extend(arr[arr.length-1])
            }
            
  // Construct the polygon.
  polygons.push(new google.maps.Polygon({
                paths: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
            polygons[polygons.length-1].setMap(map);      
            
            var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

google.maps.event.addListener(polygons[polygons.length-1], 'click', function(event) {
  infowindow.open(map);
  infowindow.setPosition(event.latLng);
  });     
            
}
 map.fitBounds(bounds);

    
...