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.
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:
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:
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
You should use include script just once, like:
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.
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.
asyc attribute is a smaller fix.
©2020 All rights reserved.