InvalidValueError: initAutocomplete ist keine Funktion Google Places und Autocomplete-API

Question

Ich hoffe, Sie können mir helfen, wenn ich eine Wand betrete, ich bin auch ziemlich neu in der Verwendung der Places-APIs von Google.

Ich werde gerade keinen Code posten, da mein Code gut funktioniert, wenn die 2 Stücke, die ich beschreiben möchte, isoliert laufen.

Ich verwende Google Places zusätzlich zur Autocomplete-API, die auf den von Google bereitgestellten Javascript-Beispielen basiert.

Anfangs hatte ich das folgende Skript an der Unterseite meines Dokuments:

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

und dieses Skript an der Spitze meines Dokuments:

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

Dies gab mir die „Sie aufgenommen haben Google Maps API mehrmals auf dieser Seite. Dies kann zu unerwarteten Fehlern führen. " so, nachdem sie in diese suchen fusionierte ich beide zusammen wie folgt aus:

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

aber jetzt, dass ich dies getan habe, erhalte ich folgende Fehler:

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

Ich erhalte diese Fehler nicht, wenn Thesen Skripte werden nicht zusammengeführt, aber ich habe später festgestellt, dass die Funktionen, die die Places API benötigen, nicht mehr funktionieren. Wenn ich die Autocomplete-API-Referenz entferne, funktionieren die Places-Funktionen.

Irgendwelche Ideen, wie ich diese beiden zusammenarbeiten kann, diese wie gezeigt zusammenführen und das Problem "keine Funktion" lösen?

Alle Vorschläge wären sehr zu schätzen, bitte lassen Sie mich wissen, wenn Sie wirklich den Code sehen müssen.

Vielen Dank im Voraus, Steph

Answer 1

Sie umfassen Skript nur einmal verwendet werden soll, wie:

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

Beachten Sie, dass Sie den 'Rückruf' param weglassen, wenn Skript enthält. laden Dann initAutocomplete auf Fenster Last wie:

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

Vielleicht würden Sie müssten gmaps Skript in den Kopf enthalten oder Sie erhalten Fehler ‚Google ist nicht definiert‘, wenn Sie Ihre js inline platziert.

Answer 2

Google Maps Auto-Vervollständigung API: Uncaught InvalidValueError: initAutocomplete ist keine Funktion

Unten finden Sie meine Code:

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