InvalidValueError: initAutocomplete không phải là chức năng Google Địa điểm và API Tự động điền

Question

Hy vọng bạn có thể trợ giúp khi tôi đã truy cập vào tường, tôi cũng khá mới sử dụng API Địa điểm của Google.

Tôi sẽ không đăng bất kỳ mã nào ngay khi mã của tôi hoạt động tốt khi 2 phần tôi sắp mô tả chạy trong sự cô lập.

Tôi đang sử dụng Địa điểm của Google ngoài API tự động điền hoạt động từ các ví dụ Javascript do Google cung cấp.

Ban đầu tôi đã có kịch bản sau đây ở dưới cùng của tài liệu của tôi:

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

và kịch bản này ở phía trên cùng của tài liệu của tôi:

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

này đã cho tôi, "Bạn đã bao gồm API Google Maps nhiều lần trên trang này. Điều này có thể gây ra lỗi không mong muốn ". nên sau khi nhìn vào điều này tôi sáp nhập cả hai cùng nhau như thế này:

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

Tuy nhiên, bây giờ mà tôi đã làm điều này, tôi nhận được các lỗi sau đây:

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

tôi không nhận được các lỗi này khi luận án các tập lệnh không được hợp nhất, nhưng sau đó tôi nhận ra rằng các chức năng yêu cầu API địa điểm ngừng hoạt động. Nếu tôi xóa tham chiếu API Tự động điền, chức năng Địa điểm sẽ hoạt động.

Bất kỳ ý tưởng nào về cách tôi có thể làm cho cả hai việc này hoạt động cùng nhau, hợp nhất những thứ này như được hiển thị và giải quyết vấn đề 'không phải là một chức năng'?

Mọi đề xuất sẽ được đánh giá cao, vui lòng cho tôi biết nếu bạn thực sự cần xem mã.

Cảm ơn trước, Steph

Answer 1

Bạn nên sử dụng bao gồm kịch bản chỉ một lần, như:

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

Lưu ý rằng bạn bỏ qua 'callback' param khi bao gồm kịch bản. Sau đó tải initAutocomplete trên tải cửa sổ như:

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

Có lẽ bạn sẽ cần phải bao gồm gmaps kịch bản trong đầu hoặc bạn sẽ nhận được lỗi 'google không được định nghĩa', nếu bạn đặt inline js của bạn.

Answer 2

Google Maps Autocompletion API: của router InvalidValueError: initAutocomplete không phải là một chức năng

Dưới đây là mã của tôi:

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