爲什麼嘗試從Google Places API中拉出城市時，我的自動填充搜索結果會凍結？

Question

在我的網頁基本模板中，我有用於JQuery，Google Places API，自動完成插件和JS代碼來調用功能的鏈接。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaa7NZzS-SE4JW3J-7TaA1v1Y5aWUTiyc&libraries=places"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script> 

<script> 

    $(function(){ 

    $("#searchBoxGlow").geocomplete() 

    }); 

    </script> 

最後，我有我想要自動完成城市名稱

<input type="text" class="form-control input-lg" id="searchBoxGlow" name="city" placeholder="Search Cities"> 

但是它凍結，並顯示一個驚歎號在這個截圖搜索字段：

Answer 1

這爲我工作。

<input type="text" id="searchplace" /> 
<input type="hidden" id="latitude" name="latitude"/> 
<input type="hidden" id="longitude" name="longitude"/> 

和HTML部分中，我添加了這個：

<script type="text/javascript"> 
    function initialize() { 
     var searchBox = document.getElementById('searchplace'); 
     var autocomplete = new google.maps.places.Autocomplete(searchBox); 
     var latitude; 
     var longitude; 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 

      latitude = place.geometry.location.lat(); 
      longitude = place.geometry.location.lng(); 
      document.getElementById('latitude').value = place.geometry.location.lat(); 
      document.getElementById('longitude').value = place.geometry.location.lng();          
     });            
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>