JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=visualization"></script>
  <body>
      <input type="button" id="bSubmit" value="Submit" />
    <div id="map-canvas"></div>
  </body>

CSS

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

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var centerLatlng = new google.maps.LatLng(41.58950,-93.612);
  mapOptions.center = centerLatlng;
  var bermudaTriangle;

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Define the LatLng coordinates for the polygon.
  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)
  ];

  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);
    
  var hoodLayer = new google.maps.KmlLayer({
    url: 'https://orionhub.org/file/kpowz-OrionContent/files/hev_boundary.kml'
  });
  
  hoodLayer.setMap(map);
  var mapsEngineLayer = new google.maps.visualization.MapsEngineLayer({
    layerId: '00463335882591727230-12798225287603138914',
    map: map
  });
    
    //00463335882591727230-05414812628978701557

  // Add a listener for the click event.
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
  google.maps.event.addListener(bermudaTriangle, 'mouseover', fadePolygon);

  infoWindow = new google.maps.InfoWindow();
}

function fadePolygon(event){
    alert("yellow!");
}
/** @this {google.maps.Polygon} */
function showArrays(event) {

  // Since this polygon has only one path, we can call getPath()
  // to return the MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString =...