InvalidValueError：initAutocomplete不是一個函數Google Places和Autocomplete API

Question

希望你能幫忙，因爲我遇到了困難，我對使用Google的Places API也很陌生。

我不打算髮布任何代碼，因爲我的代碼可以很好地工作，當我將要描述的兩件件單獨運行時。

我使用的是Google的Places，除了使用Google提供的Javascript示例工作的自動填充API之外。

起初，我有以下腳本在我的文檔的底部：

<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&callback=initAutocomplete" async defer></script> 

和這個腳本在我的文檔的頂部：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

這給了我，「你已經包括Google Maps API多次出現在此頁面上，這可能會導致意外錯誤。「所以尋找到這後，我合併在一起都像這樣：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=initAutocomplete&sensor=false"></script> 

但是，現在，我已經這樣做了，我收到以下錯誤：

InvalidValueError: initAutocomplete is not a function 
TypeError: searchBox is undefined 

我沒有收到這些錯誤時，論文腳本不合並，但我後來意識到需要Places API的功能停止工作。如果我刪除了自動填充API參考，那麼Places函數就可以工作。

關於如何使這兩個工作在一起的任何想法，如圖所示合併這些並解決「不是功能」問題？

任何建議將不勝感激，請讓我知道你是否真的需要看代碼。

由於提前， 斯蒂芬

Answer 1

您應該使用包括腳本只有一次，如：

//maps.googleapis.com/maps/api/js?key=__API-KEY__&libraries=places 

請注意，您包括腳本時省略了「回調」 PARAM。 然後在窗口中加載負荷像initAutocomplete：

google.maps.event.addDomListener(window, 'load', initAutocomplete); 

也許你需要包括在頭gmaps腳本或者您會得到「沒有定義谷歌的錯誤，如果你下的js內聯。

Answer 2

谷歌地圖API自動完成：未捕獲InvalidValueError：initAutocomplete不是一個函數

下面是我的代碼：

<div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" type="text"></input> 
    </div>--This is the input field 
    <script>-- This is Javascript 

     var placeSearch, autocomplete; 
     var componentForm = { 
     street_number: 'short_name', 
     route: 'long_name', 
     locality: 'long_name', 
     administrative_area_level_1: 'short_name', 
     country: 'long_name', 
     postal_code: 'short_name' 
     }; 

     function initAutocomplete() { 
      autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
      {types: ['geocode']}); 
      autocomplete.addListener('place_changed', fillInAddress); 
     } 

     function fillInAddress() { 

     var place = autocomplete.getPlace(); 

     for (var component in componentForm) { 
      document.getElementById(component).value = ''; 
      document.getElementById(component).disabled = false; 
     } 


     for (var i = 0; i < place.address_components.length; i++) { 
      var addressType = place.address_components[i].types[0]; 
      if (componentForm[addressType]) { 
      var val = place.address_components[i][componentForm[addressType]]; 
      document.getElementById(addressType).value = val; 
      } 
     } 
     } 


     function geolocate() { 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var geolocation = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 
      var circle = new google.maps.Circle({ 
       center: geolocation, 
       radius: position.coords.accuracy 
      }); 
      autocomplete.setBounds(circle.getBounds()); 
      }); 
     } 
     } 
    </script> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQQUPe-GBmzqn0f8sb_8xZNcseul1N0yU&libraries=places&callback=initAutocomplete" async defer></script>