-
-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Next.js Integration #1036
Comments
I have this problem too |
Per the recent Nextjs shift in best practices for loading beforeInteractive scripts, you can instantiate the library as pictured and it works perfectly. I’m using next@latest, edge middleware, etc etc; works with next@12.x.x if anyone has tips for using the returned latlng values with Algolia InstantSearch Hooks it’d be much appreciated. I currently have it all working in isolation; but when using both Google places and algolia in the same form the fetching strategies clash I think (fiddling with Promise.all([]) but might say fuck it and use global context, keep the worlds separate). That said, it would be dope to see an algolia-instantsearch-hooks use places autocomplete integration |
@DopamineDriven Thanks. Is that code in "pages/_document.js"? I have similar code in document and it's not working for me.
|
Without making the script available everywhere, putting it in Edit: the above only partially worked, since it would load once and no longer work on refresh. |
Reason: Solution:
A. We set a flag somewhere in redux/zustand/context when the google maps script is loaded. The placement of script tag will depend on the use cases like:
B. Wherever we are using
The above example uses a zustand store, same can be implemented for redux or context as well. |
Hey there: @paularah However, this doesn't work for me when I put it on a single page inside the In short, putting it on |
I had same problem. Using this package, I was able to wait until script is loaded and then call the component to usePlacesAutocomplete. |
@nyfever007 any chance you can paste a snippet? I tried reproducing your approach with no success. |
@paularah By using use-google-maps-script package you can wait until script is loaded then call your address component.
|
If you want to dynamically load in the Google script when component mounts, this worked for me: // hook
const { init /*, ...rest */ } = usePlacesAutocomplete({
initOnMount: false,
});
// component
<Script
src="https://maps.googleapis.com/maps/api/js?key=${GOOGLE_PLACES_KEY}&libraries=places"
onReady={init}
/> |
Adding defer solve this issue for me <Script defer id="googlemaps" src="https://maps.googleapis.com/maps/api/js?key=''&libraries=places" strategy="beforeInteractive" type="text/javascript" /> |
Did you have working like this? |
@avaneeshtripathi thanks a lot! Your solution with init() worked well. Had issue waiting for loads on refresh and this solves it! |
I would appreciate a definitive guide on using this with next.js. The Next.js script tag with a beforeInteractive strategy gives the error
use-places-autocomplete: Google Maps Places API library must be loaded.
The native script tag only works with asynchronous loading since external synchronous scripts are forbidden in Next.js. asynchronously loading the script occasionally freezes the input field.The text was updated successfully, but these errors were encountered: