InvalidValueError: initAutocomplete is not a function Google Places and Autocomplete API

Question

Hope you can help as I've hit a wall, I'm also quite new to using Google's Places APIs.

I'm not going to post any code just yet as my code works fine when the 2 pieces I am about to describe run in isolation.

I am using Google's Places in addition to the Autocomplete API working from the 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 this 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 the, "You have included the Google Maps API multiple times on this page. This may cause unexpected errors." so after looking into this I merged both together like this:

<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 receive the following errors:

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

I don't receive these errors when theses scripts are not merged, but I realised afterwards that the functions requiring the Places API stopped working. If I remove the Autocomplete API reference, the Places functions work.

Any ideas on how I can make both of these work together, merging these as shown and solving the 'not a function' issue?

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

Thanks in advance, Steph

Solution 1

You should use include script just once, like:

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

Note that you omit the 'callback' param when including script. Then load initAutocomplete on window load like:

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

Maybe you would need to include gmaps script in head or you would get 'google is not defined' error, if you placed your js inline.

Solution 2

Just tried this and found that removing the asyc attribute solves this problem. Even when using the callback on the Google API URL for Places.

Removing the asyc attribute is a smaller fix.

Comments

[OMNIA Design and Marketing]

Yeah this works! If you want the JavaScript in your external JS file instead of in the HTML/PHP page like the example, this works well. Drop the callback, add the dom listener in your JS. Worked like a dream! BUT don't forget the geolocate() onFocus... you would need to move that to your external JS as well...

[Mueyiwa Moses Ikomi]

I had the same issue using it with WordPress but I noticed that this only happens if my autocomplete function was written inside the JQuery onload function, so i moved it out. I havent tested for vanilla js's onload function but it should typically be the same approach nonetheless.

[Diego Somar]

This solution works for me. In my case, I removed async attr from the Maps API script tag too.

[booky99]

this was the only thing that worked for me