JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

// This example adds a red rectangle to a map.
      function calcBounds(center,size){
      
         var n=google.maps.geometry.spherical.computeOffset(center,size.height/2,0).lat(),
             s=google.maps.geometry.spherical.computeOffset(center,size.height/2,180).lat(),
             e=google.maps.geometry.spherical.computeOffset(center,size.width/2,90).lng(),
             w=google.maps.geometry.spherical.computeOffset(center,size.width/2,270).lng();
             return  new google.maps.LatLngBounds(new google.maps.LatLng(s,w),
                                                  new google.maps.LatLng(n,e))
      
      }
 
function initialize() { 
 
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 20,
    center: new google.maps.LatLng(40.626805, -89.539396),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

var rectangle = new google.maps.Rectangle({ 
	strokeColor: 'green',
    strokeOpacity: 1,   
    
    fillColor: 'green',  
   
    map: map,  	
    bounds: calcBounds(map.getCenter(),new google.maps.Size(75,75))   
	});     
 

  
}

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