Comments (16)
jasan-s
commented on May 26, 2024
2
how is this closed? this is still an issue
from use-places-autocomplete.
l3onwu
commented on May 26, 2024
1
This error message also appear at: https://use-places-autocomplete.netlify.app/
That's because the JavaScript file of React.js isn't loaded after the Google Maps library. Once the loading ordering of the scripts is correct the error should be gone.
Hey did you ever solve this? Have done the same as above, but getting the same error, even with async and defer keywords for the script tag.
from use-places-autocomplete.
mech
commented on May 26, 2024
1
Do you have more information on this error again. I am not too sure what is meant by:
That's because the JavaScript file of React.js isn't loaded after the Google Maps library.
I am using Next.js, so I believe the whole of React should be loaded in the first place.
from use-places-autocomplete.
l3onwu
commented on May 26, 2024
1
I'm using create-react-app and was encountering the issue. Seems to be due to inconsistencies with how react is loaded, as sometimes I encountered the error and sometimes I did not.
What solved it for me was to set initOnMount as 'false', and use another library to load google maps API. I then initalized the use-places-autocomplete as a callback to the library loading. https://www.npmjs.com/package/load-google-maps-api
from use-places-autocomplete.
vileen
commented on May 26, 2024
1
I also face the same issue no matter the
asyncordeferOnly way I get rid of the error is setting<script async defer src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.secrets.google[:key] %>&libraries=places&callback=googleMapsCallback"></script> <script> window.googleMapsCallback = () => {} </script>in
<head>tagIs this ok?
you can just pass Function.prototype as callback if you don't need it, that way you'll avoid declaring useless function
from use-places-autocomplete.
wellyshen
commented on May 26, 2024
@LucasLemanowicz Thank you for reporting this issue, I have updated the document. ✌🏻
from use-places-autocomplete.
mech
commented on May 26, 2024
I am puzzle what we should do in the callback function. Maybe provide some example?
If we don't do anything in the callback function, is it we still need to provide an empty no-op function?
from use-places-autocomplete.
wellyshen
commented on May 26, 2024
@mech Just give the value of the callback parameter to the hook, it will do magic for you 😉
from use-places-autocomplete.
LucasLemanowicz
commented on May 26, 2024
@mech if you look at this useEffect hook, callbackName is being used to assign usePlacesAutocomplete's init function to a global window function of that name, which is what the Google Place API will call once it loads: https://github.com/wellyshen/use-places-autocomplete/blob/c67fd9f/src/usePlacesAutocomplete.ts#L171-L175
That init function then initializes usePlacesAutocomplete: https://github.com/wellyshen/use-places-autocomplete/blob/c67fd9f/src/usePlacesAutocomplete.ts#L65-L79
from use-places-autocomplete.
mech
commented on May 26, 2024
Oh now I get it. The function itself has already been implemented and I am just going to give it a "any" string I like but it must be matched with the query string parameter.
Example:
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap
></script>
I am using the string "initMap", then at the React side:
const x = usePlacesAutocomplete({callbackName: "initMap"})The fact of the matter is that this "initMap" named function we do not need to implement ourselves.
from use-places-autocomplete.
mech
commented on May 26, 2024
Not sure if I do it wrong, but I got this error:
{message: 'initMap is not a function', stack: 'Error\n at _.He.captureStackTrace (https://maps.…ly&language=en®ion=SG&callback=initMap:222:255', name: 'InvalidValueError'}
With a InvalidValueError error.
I actually try to follow this commit code:
This error message also appear at: https://use-places-autocomplete.netlify.app/
from use-places-autocomplete.
wellyshen
commented on May 26, 2024
This error message also appear at: https://use-places-autocomplete.netlify.app/
That's because the JavaScript file of React.js isn't loaded after the Google Maps library. Once the loading ordering of the scripts is correct the error should be gone.
from use-places-autocomplete.
apuntovanini
commented on May 26, 2024
I also face the same issue no matter the async or defer
Only way I get rid of the error is setting
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.secrets.google[:key] %>&libraries=places&callback=googleMapsCallback"></script>
<script>
window.googleMapsCallback = () => {}
</script>in <head> tag
Is this ok?
from use-places-autocomplete.
wellyshen
commented on May 26, 2024
how is this closed? this is still an issue
The problem is not with this library, but with the loading order of the React and Google Maps API scripts. Make sure that the Google Maps API is loaded after the hook, as demonstrated by @l3onwu here.
from use-places-autocomplete.
MiguelNiblock
commented on May 26, 2024
I ended up loading the library during app initialization, using a little 3rd party helper specific for loading the google maps api. https://www.npmjs.com/package/load-google-maps-api
This is equivalent to loading the hook inside a conditional component. But in my app, the more reliable thing was for the entire app to be conditional based on the loading state of this library. https://www.npmjs.com/package/use-places-autocomplete#option-2-wrap-the-hook-into-a-conditional-component
/** Loads the google api library which is needed by places autocomplete in web */
export const useGoogleMapsApi = () => {
const [loading, setLoading] = useState(true)
useEffect(() => {
if (!isWeb) return setLoading(false)
loadGoogleMapsApi({ libraries: ['places'], key: env.API_KEY }).then(() => setLoading(false))
}, [])
return loading
}
This runs in the entry file, and the actual app UI won't load until this and other necessary initialization tasks are done. That makes it 100% reliable when it comes to using the hook without getting problems loading the library.
With this, initOnMount can be left undefined, because by the time the hook runs in any component, the library must have been loaded during global app initialization.
from use-places-autocomplete.
Related Issues (20)
- @types/googlemaps is deprecated in favor of @types/google.maps HOT 1
- show suggestions by default
- Next.js Integration HOT 13
- You have included the Google Maps JavaScript API multiple times on this page HOT 1
- How to use service.nearbySearch( )
- `getAddressComponent` utility function HOT 3
- Feature request: Cache support for utility functions
- TypeError: Cannot read properties of undefined (reading 'maps') at getGeocode
- use getGeocode before usePlacesAutocomplete
- request a new working example HOT 1
- [Feature] Display all the info returned from the serch in the page
- Limit the search to a specific area HOT 3
- Is administrativeArea accepted in componentRestrictions
- Bounds, location, and radius in the Maps JavaScript API Place Autocomplete Service (Deprecated as of May 2023) HOT 3
- Granular address_components not available in data response?
- Live demo doesn't work HOT 1
- Do all hooks share the same context?
- Configurable Retry with Exponential Backoff HOT 2
- Does getLatLng util really need to be async? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-places-autocomplete.