JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>

<form action="javascript:void(0);" name="search" id="search-form">
  <input type="text" name="location" class="textbox" id="search-input" value="" />
  <input type="submit" value="Submit" class="submit" />
</form>

<div id="map-canvas"></div>

CSS

#map-canvas {         
    height: 400px;         
    width: 400px;   
}

JavaScript

$(function(){
    function searchBar(map) {
        var input = document.getElementById('search-input');
        var searchform = document.getElementById('search-form');
        var place;
        var options = {componentRestrictions: {country: 'us'}};
        var autocomplete = new google.maps.places.Autocomplete(input, options);
    
        //Add listener to detect autocomplete selection
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            place = autocomplete.getPlace();
            center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
            map.setCenter(center);
            map.setZoom(5);
        });
     
        //Add listener to search
        searchform.addEventListener('submit', function() {
            center = new                 google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
            map.setCenter(center);
            map.setZoom(5);
        });
         
        //Reset the inpout box on click
        input.addEventListener('click', function(){
            input.value = "";
        });
    };
    
    function initialize() {
        var latitude = 37.6,
            longitude = -95.665,
            center = new google.maps.LatLng(latitude,longitude),
            mapOptions = {
                center: center,
                zoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
    
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
        searchBar(map);   
    }
    
    initialize();
    //google.maps.event.addDomListener(window, 'load', initialize);
});