JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status"></div>
<div id="search">
  City/location name:&nbsp;<input type="text" id="location" value="4234 Swarthmore St"/>           
  <input type="button" value="Find Earthquakes" onclick="findAddress()" />
</div>
<div id="container">
  <div id="leftcolumn">
    <div id="map"></div>          
  </div>
</div>    
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */

html, body, #outer-container, #map-canvas { height: 100%; margin: 0; padding: 0;}
	#search 
	{
	    margin: 20px 0px 0px 20px;
	}
	#container {
        width:100%;
        height: 100%;
        margin: 20px 20px 20px 20px;
    }
    #leftcolumn {
        float:left;
        width:100%;
        height: 100%;
    }
    #rightcolumn {
        float:left;
        width:40%;
    }
    #map-container 
    {        
        width: 100%;
        height: 100%;
    }

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 initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 29.929266, 
      lng: -90.119429
    },
    mapTypeId: 'satellite'
  });
  geocoder = new google.maps.Geocoder();	    
  findAddress();
}

function initialize() {
  geocoder = new google.maps.Geocoder();	    
  findAddress();
  searchTopEarthquakes();
}

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

function findAddress() {
  var address = document.getElementById('location').value;
  geocoder.geocode({
    'address': address
  }, function (results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      var mapOptions = {
        zoom: 20,
        center: results[0].geometry.location,
        mapTypeId: google.maps.MapTypeId.SATELLITE
      }

      if(!map)	{
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
      }

      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });

      var sw = results[0].geometry.bounds.getSouthWest();
      var ne = results[0].geometry.bounds.getNorthEast();
      var padding = 0.00002;
      var boxCoords = [
        new google.maps.LatLng(ne.lat()+padding, ne.lng()+padding),
        new google.maps.LatLng(ne.lat()+padding, sw.lng()-padding),
        new google.maps.LatLng(sw.lat()-padding, sw.lng()-padding),
        new google.maps.LatLng(sw.lat()-padding, ne.lng()+padding),
        new google.maps.LatLng(ne.lat()+padding, ne.lng()+padding)
      ];
      var bbox = new google.maps.Polyline({
        path: boxCoords,
        geodesic: false,
        strokeColor: '#FF0000',
        strokeOpacity: 0.5,
        strokeWeight: 2
      });

      bbox.setMap(map);

      // get...