Javascript 谷歌地图位置搜索框不工作

这是一项相当多的研究，但没有结果。试图实现谷歌地图API，但搜索选项似乎仍然是在大。由于引导的使用，它增加了更多的麻烦

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

我想要实现的是：

单击搜索按钮时，只有地图部分应该刷新。

搜索结果还应显示附近的位置。

    <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>  

函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'mapSearchBox'）{
中心：{lat:-33.8688，lng:151.2195}，
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//创建搜索框并将其链接到UI元素。
var input=document.getElementById（'maplocationsearch'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
//将搜索框结果偏向当前地图的视口。
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
var标记=[]；
//当用户选择预测并检索该位置的更多详细信息时，侦听触发的事件。
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
//清除旧的标记。
markers.forEach（函数（marker）{
marker.setMap（空）；
});
标记=[]；
//对于每个位置，获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
变量图标={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
markers.push（新的google.maps.Marker）({
地图：地图，
图标：图标，
标题：place.name，
位置：place.geometry.location
}));
if（place.geometry.viewport）{
//只有地理代码具有视口。
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
});
}

---

如何纠正此问题？请帮忙

您可以通过指定