JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>

<body>
<div id="content">
    <h1>Google Maps Autocomplete Search Sample</h1>
    <div align="left">
        <form method="post" action="#">
            <input type="text" value="" id="searchbox" name="searchbox" style=" width:800px;height:30px; font-size:15px;">
            <input type="submit" />
            <div class="ui-widget" style="margin-top:2em; font-family:Arial">
                Result:
                <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
            </div>
        </form>
    </div>
    <div align="left" id="map" style="width:800px; height: 600px; margin-top: 10px; ">  
    </div>
</div>
<?php
include_once('inc/foot.php');
?>
<script type="text/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();  

     $(function() {

         function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

         $("#searchbox").autocomplete({

           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
                  var lat = results[0].geometry.location.lat();
                  var lng =...