Geek Answers Handbook

InvalidValueError: initAutocomplete is not a function of the Google Places and AutoComplete API

I hope you can help when I hit the wall, I'm also completely unfamiliar with the Google Places APIs.

I will not publish any code yet, as my code works fine when the 2 parts that I am going to describe are executed in isolation.

I use Google Places in addition to the autocomplete API that works with Javascript examples provided by Google.

Initially, I had the following script at the bottom of my document:

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

and the script at the top of my document:

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

This gave me: "You have enabled the Google Maps API several times on this page, which may cause unexpected errors." therefore, looking at this, I combined them together:

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

However, now that I have done this, I get the following errors:

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

I don’t get these errors when these scripts are not combined, but after that I realized that the functions that require the Places API stopped working. If I remove the Autocomplete API link, the Places functions will work.

Any ideas on how I can get both of these teams to work together, combining them as shown, and solving the "non-function" problem?

Any suggestions would be very valuable, please let me know if you really need to see the code.

Thanks in advance, Steph

+6
source share
2 answers

You should use include script only once, for example:

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

Note that you omit the callback parameter when you include the script. Then load initAutocomplete when the window loads, for example:

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

You may need to include the gmaps script in your head or you will get a "google is not defined" error if you posted your js inline.

+5
source

Google Maps AutoComplete API: Uncaught InvalidValueError: initAutocomplete is not a function

Below is my 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>
0
source

More articles:


All Articles