JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form id="search-form" >
    <input type="text" name="searchfield" id="searchfield" /><br/>
    <input type="hidden" name="placeinfo" id="placeinfo" />
    <input type="submit" value="Search" /><br/>
</form>
<div id="placename"></div>
<div id="map_canvas" class="gmap border_box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

CSS

.gmap {
    width:100%;
    height:250px;
    border: 1px solid #4D2722;
}
.border_box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

var map;
var service;
var infowindow;
var service;
var validated = false;

function initialize() {
	
    //set up google map
	map = new google.maps.Map(document.getElementById('map_canvas'), {
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: new google.maps.LatLng(-27.420538,153.028107),
		zoom: 10
	});
	
    //initialize places service to perform TextSearch
	service = new google.maps.places.PlacesService(map);
	
	$("#search-form").validate({
		rules: {
			searchfield: {             // compound rule
				required: true
			},
            placeinfo: {
                required: false
            }
		},
		submitHandler: function(form) {
			if (validated) { 
                // address is validated and hidden input filled, so submit the form
				alert('valid form submitted');
                validated = false;
			} else { 
                // address is not validated yet, look up on Google Maps
				var request = {
                    query: $("#searchfield").val()
				};
				service.textSearch(request, textsearchcallback);
			}
            return false;
		}
	});
}

function textsearchcallback(results, status) {
	if (status == google.maps.places.PlacesServiceStatus.OK) {
		var place = results[0];
        $("#placeinfo").val(JSON.stringify(place)); // set the value of the hidden input
        $("#placename").text(place.name); //for demo
		validated = true; // set to true so form will submit
		$("#search-form").submit(); //submit the form
	} else {
		alert("NO RESULTS FOUND!");
	}
}

$(function(){
   initialize(); 
});