JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

function initialize() {
  // Create a simple map.
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {lat: -28, lng: 137.883}
  });

  // Load a GeoJSON from the same server as our demo.
  
  google.maps.event.addListener(map.data,'addfeature',function(e){
      if(e.feature.getGeometry().getType()==='Polygon'){
          var bounds=new google.maps.LatLngBounds();
          
          e.feature.getGeometry().getArray().forEach(function(path){
          
             path.getArray().forEach(function(latLng){bounds.extend(latLng);})
          
          });
          e.feature.setProperty('bounds',bounds);
          
          new google.maps.Rectangle({map:map,bounds:bounds,clickable:false})
        
        }
  });
  google.maps.event.addListener(map.data,'click',function(e){
   var bounds=e.feature.getProperty('bounds');
    if(bounds){
      alert('bounds:\n'+bounds.toString());
    }
  })
  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
  
  
}

google.maps.event.addDomListener(window, 'load', initialize);