InvalidValueError: initAutocomplete nie jest funkcją API Miejsc Google i autouzupełniania

Question

Mam nadzieję, że możesz pomóc, gdy trafiłem w ścianę, jestem też całkiem nowy w korzystaniu z interfejsów API Miejsc Google.

Nie mam zamiaru opublikować żadnego kodu, ponieważ mój kod działa poprawnie, gdy 2 elementy, które zamierzam opisać, działają w izolacji.

Korzystam z Miejsc Google oprócz funkcji autouzupełniania interfejsu API działającej na podstawie przykładów Javascript dostarczonych przez Google.

Początkowo miałem następujący skrypt na dnie mojego dokumentu:

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

i ten skrypt na szczycie mojego dokumentu:

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

To dało mi „Ty obejmowały Google Maps API wiele razy na tej stronie. Może to spowodować nieoczekiwane błędy. " więc po patrząc na to, że oba połączone ze sobą tak:

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

Jednak teraz, że zrobiłem to, otrzymuję następujące błędy:

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

nie otrzymam te błędy podczas tezy Skrypty nie są scalane, ale później przekonałem się, że funkcje wymagające interfejsu API Miejsc przestały działać. Po usunięciu odwołania do funkcji autouzupełniania interfejsu API funkcje Miejsca działają.

Jakieś pomysły na to, w jaki sposób mogę sprawić, aby oba te elementy działały razem, łącząc je tak, jak pokazano i rozwiązując problem "nie jest funkcją"?

Wszelkie sugestie są bardzo doceniane, proszę dać mi znać, jeśli naprawdę potrzebujesz zobaczyć kod.

Dzięki z góry, Steph

Answer 1

należy użyć skryptu to tylko raz, jak:

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

pamiętać, że pominięcie 'oddzwaniania' param gdy w tym skrypt. Następnie załaduj initAutocomplete na obciążenia okno jak:

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

Może trzeba by to GMaps skrypt w głowie lub można dostać „google” nie jest zdefiniowany błąd, jeśli umieścić swój js inline.

Answer 2

Autouzupełnianie Google Maps API: Uncaught InvalidValueError: initAutocomplete nie jest funkcją

Poniżej jest mój kod:

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