13

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

Gareth Lewis
  • 751
  • 2
  • 15
  • 36
Stephanie Nicolaou
  • 153
  • 1
  • 1
  • 7

3 Answers3

24

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.

Bobz
  • 2,345
  • 2
  • 18
  • 22
  • 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... – OMNIA Design and Marketing Apr 13 '18 at 05:09
  • 1
    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. – Mueyiwa Moses Ikomi Jul 21 '19 at 04:11
  • 1
    This solution works for me. In my case, I removed `async` attr from the Maps API script tag too. – Diego Somar Sep 20 '19 at 15:27
  • this was the only thing that worked for me – booky99 Jul 15 '21 at 11:25
5

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 async attribute is a smaller fix.

sa77
  • 3,563
  • 3
  • 24
  • 37
ramulin
  • 293
  • 3
  • 7
0

Just remove &callback=initAutocomplete from the query and call it in the script when all will be loaded.

NSukonny
  • 1,090
  • 11
  • 18