InvalidValueError: initAutocomplete non è una funzione API di Google Places e di completamento automatico

Question

Spero che tu possa aiutarti perché ho colpito un muro, inoltre sono abbastanza nuovo nell'utilizzare le API di Google Places.

Non ho intenzione di postare alcun codice ancora, come il mio codice funziona bene quando i 2 pezzi che sto per descrivere funzionano in isolamento.

Sto utilizzando Google Places oltre all'API di completamento automatico utilizzando gli esempi Javascript forniti da Google.

Inizialmente ho avuto il seguente script in fondo del mio documento:

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

e questo script nella parte superiore del mio documento:

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

Questo mi ha dato la "Tu hai incluso l'API di Google Maps più volte su questa pagina. Ciò potrebbe causare errori imprevisti. " così dopo aver guardato in questo ho fuso entrambi insieme in questo modo:

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

Tuttavia, ora che ho fatto questo, ricevo i seguenti errori:

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

non ricevo questi errori quando tesi gli script non vengono uniti, ma in seguito mi sono reso conto che le funzioni che richiedono l'API Places hanno smesso di funzionare. Se rimuovo il riferimento all'API di completamento automatico, le funzioni di Places funzionano.

Qualche idea su come posso far funzionare entrambi questi elementi, unendoli come mostrato e risolvendo il problema di "non una funzione"?

Qualsiasi suggerimento sarebbe molto apprezzato, per favore fatemi sapere se avete davvero bisogno di vedere il codice.

Grazie in anticipo, Steph

Answer 1

Si dovrebbe utilizzare includono lo script solo una volta, come:

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

Nota che si omette il parametro 'richiamata' quando compresi script. Poi caricare initAutocomplete sul carico finestra come:

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

Forse si avrebbe bisogno di includere Gmaps script nella testa o si otterrebbe errore 'Google non è definito', se hai effettuato l'inline js.

Answer 2

Google Maps API di Completamento automatico: InvalidValueError Uncaught: initAutocomplete non è una funzione

Qui di seguito è il mio codice:

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