谷歌地图地点搜索框不起作用

这是一项相当多的研究，但无济于事。尝试实现谷歌地图API，但是搜索选项似乎仍然很大。由于Bootstrap的使用，它增加了更多的麻烦。

截至目前，整个页面都在刷新，搜索选项不起作用

我想要实现的是 ：

1. Only the map portion should refresh, when search button is clicked.

2. The search results should also display nearby places.

       <section class="no-padding adv--section">   
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&callback=initAutocomplete" async defer></script>
       <div id="offers-map" class="offers-map2"></div>
         <div class="container">
            <div class="row">
              <div class="col-xs-12">
                <div id="tfheader">
       <form id="tfnewsearch" method="get">
               <input type="text" id="mapSearchBox" class="tftextinput" placeholder="Write Place Name To Search Parking................" name="q" size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">
       </form>
               <script>
                   function initAutocomplete() {
                       var map = new google.maps.Map(document.getElementById('mapSearchBox'), {
                       center: {lat: -33.8688, lng: 151.2195},
                       zoom: 13,
                       mapTypeId: google.maps.MapTypeId.ROADMAP
                   });
               // Create the search box and link it to the UI element.
                       var input = document.getElementById('maplocationsearch');
                       var searchBox = new google.maps.places.SearchBox(input);
                       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
               // Bias the SearchBox results towards current map's viewport.
                       map.addListener('bounds_changed', function() {
                       searchBox.setBounds(map.getBounds());
                   });
                       var markers = [];
               // Listen for the event fired when the user selects a prediction and retrieve more details for that place.                                       
                       searchBox.addListener('places_changed', function() {
                       var places = searchBox.getPlaces();
                           if (places.length == 0) {
                               return;
                           }
               // Clear out the old markers.
                       markers.forEach(function(marker) {
                       marker.setMap(null);
                  });
                   markers = [];
               // For each place, get the icon, name and location.
                       var bounds = new google.maps.LatLngBounds();
                       places.forEach(function(place) {
                           var icon = {
                           url: place.icon,
                           size: new google.maps.Size(71, 71),
                           origin: new google.maps.Point(0, 0),
                           anchor: new google.maps.Point(17, 34),
                           scaledSize: new google.maps.Size(25, 25)
                       };
               // Create a marker for each place.
                       markers.push(new google.maps.Marker({
                       map: map,
                       icon: icon,
                       title: place.name,
                       position: place.geometry.location
                   }));
                                           if (place.geometry.viewport) {
                                             // Only geocodes have viewport.
                                                   bounds.union(place.geometry.viewport);
                                                       } else {
                                                   bounds.extend(place.geometry.location);
                                                   }
                                               });
                                         map.fitBounds(bounds);
                                       });
                                     }
                                   </script>                                           
                               <div class="tfclear"></div>
                           </div>
                       </div>
                   </div>
               </div>          
       </section>  
   

我该如何纠正？请帮忙!!