JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/jscript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
  <h1>Google Maps Autocomplete Search Sample</h1>
  <div align="left">
   <input type="text" value="" id="searchbox" style=" width:800px;height:30px; font-size:15px;" >
  </div>
  <div align="left" id="map" style="width:800px; height: 600px; margin-top: 10px;">
   
  </div>

JavaScript

$(document).ready(function(){

  var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(41.06000,28.98700)
     };

  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  
	 searchBoxMapAddress = function () {

		// Create the search box and link it to the UI element.
		var input = /** @type {HTMLInputElement} */(document.getElementById('searchbox')); 
		 
		 var searchBox = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(input),  { types: ['geocode'] });
		  
		// Listen for the event fired when the user selects an item from the
		// pick list. Retrieve the matching places for that item.
		 google.maps.event.addListener(searchBox, 'place_changed', function () {
			 
					var places = searchBox.getPlace(); 
				  
					 
					// For each place, get the icon, place name, and location.
		 
					var bounds = new google.maps.LatLngBounds();
		  
					bounds.extend(places.geometry.location); 
			 
					map.fitBounds(bounds);
			 

		 });
		 
		// Bias the SearchBox results towards places that are within the bounds of the
		// current map's viewport.
		google.maps.event.addListener(map, 'bounds_changed', function () {
			var bounds = map.getBounds();
			searchBox.setBounds(bounds);
		});
		 
	}
	setTimeout(function(){
	$(".pac-container").append('<div id="areasearch" class="pac-item areasearch" onclick="alert(\'make onclick\')"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>qwerty</span> <span>Area</span></div>');
    }, 500);
 searchBoxMapAddress();
 });