InvalidValueError: initAutocomplete не является функцией. Адреса Google и Autocomplete API

Question

Надеюсь, что вы можете помочь, поскольку я ударил по стене, но я также очень новичок в использовании API-интерфейсов Google.

Я пока не буду публиковать какой-либо код, так как мой код отлично работает, когда 2 части, которые я собираюсь описать, работают изолированно.

Я использую Google Места в дополнение к API автозаполнения, работающему с примерами Javascript, предоставленными Google.

Изначально у меня был следующий сценарий в нижней части моего документа:

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

Это дало мне, «Вы включили API Карт Google несколько раз на этой странице. Это может вызвать непредвиденные ошибки ». поэтому после изучения этого я сливался оба вместе, как это:

<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 

Я не получаю эти ошибки при диссертации сценарии не объединены, но после этого я понял, что функции, требующие API Places, перестали работать. Если я удалю ссылку API Autocomplete, функции Places будут работать.

Любые идеи о том, как я могу заставить оба эти произведения работать вместе, объединяя их, как показано, и решая проблему «не функции»?

Любые предложения были бы очень ценными, пожалуйста, дайте мне знать, если вам действительно нужно увидеть код.

Спасибо заранее, Стеф

Answer 1

Вы должны использовать сценарий включать только один раз, как:

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

Обратите внимание, что вы опускаете «обратного вызова» параметров при включении сценария. Затем загрузите initAutocomplete на оконной нагрузке, как:

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

Возможно, вам нужно будет включить Gmaps сценарий в голове или вы получите «Google не определен» ошибку, если вы разместили свой Js инлайн.

Answer 2

Google Maps API автозаполнения: Uncaught 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>