react-places-autocomplete | React component for Google Maps Places Autocomplete | Autocomplete library
kandi X-RAY | react-places-autocomplete Summary
kandi X-RAY | react-places-autocomplete Summary
A React component to build a customized UI for Google Maps Places Autocomplete.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-places-autocomplete
react-places-autocomplete Key Features
react-places-autocomplete Examples and Code Snippets
Community Discussions
Trending Discussions on react-places-autocomplete
QUESTION
In order to use the react-places-autocomplete lib, I implemented the gmaps script as stated in the doc but I get a "You have included the Google Maps JavaScript API multiple times on this page." error when I go to any page with 4-5 copy of the script tag.
If I remove the GooglePlacesScript component, no instance of the script is added.
If I put the GooglePlacesScript component at a page or component level, I still get the error wherever I go on the website somehow.
Any idea why Next is duplicating the script?
GooglePlacesScript component:
...ANSWER
Answered 2021-Dec-13 at 14:07I would suggest using @googlemaps/react-wrapper.
QUESTION
I cannot find this answer in the Google docs so I am posting my question here.
As per the Google Places Autocomplete response docs, bounds
is one of the returned fields.
However, when console logging bounds
in the browser, the object has strangely named keys such as Ba
, Ab
, Ra
and so on..
Furthermore, I have noticed that these keys change overtime.
For example, the following code might fail within a few days. In the initial search for say, New York, bounds.Ab.g
may contain a number value.
however, after a few days bounds.Ab.g
might become bounds.Bb.g
and the original value will be undefined
.
ANSWER
Answered 2021-Nov-26 at 04:55thanks to @geocodezip for the answers in the comments section.
here is the solution
QUESTION
Current behaviour:
I'm having a local development environment on mac from which I git push to my remote repo. My production server is on linxu and there I pull my repo. Usually this works fine but this time I'm stuck with an error I can't find a workaround for :(
npm ci
failing on linux because of fsevents
Steps to reproduce:
$ npm ci
ANSWER
Answered 2021-Jul-25 at 13:38This is a well-known problem, one of your package dependencies needs fs-events
when running on macOS.
When Node.js is running on Linux,this package is not needed, and since you are using --ci
flag, it fails to install fs-events
on Linux.
You can try removing --ci
flag or you can try adding fs-events
in optionalDependencies
in your package file.
QUESTION
I have a search bar with the Google Maps Places Autocomplete. I am using the npm package 'react-places-autocomplete' in Next.js.
Is there any way to get the postal code in handleSelect?
...ANSWER
Answered 2020-Nov-30 at 19:40Simple answer: No, you can't directly get the postcode from the google places autocomplete service you can see the response object here.
Long answer: Yes with more calls.
In the prediction you will be given a property called a place_id
, you can use this with other google services such as getDetails which will provide you with a PlaceResult where you can get address details such as lat and lng coordinates.
If you still can't get the address details you need this point you can use free a service like https://postcodes.io/ to then get the postcode from the lat and lng coordinates.
I have a full guide on how you can use postcodes with the JavaScript Google Places Api here
As for react-places-autocomplete:
I am not sure what it provides but if the module is anything like use-places-autocomplete, an easier solution would be to get the place_id from the prediction, use next.js's ssr capability and make the above requests server side and then return the postcode to your client side.
If you want to know any more about using the Google Places Autocomplete Service with react I suggest taking a look at this blog post/tutorial that I wrote about it: https://atomizedobjects.com/blog/react/how-to-use-google-autocomplete-with-react-hooks/
QUESTION
So I am working on a website that is using react. I have been testing it in different browsers, and right now the only browser not working is the terrible Internet Explorer. When the page loads on internet explorer it is just a blank/white screen. I have tried multiple suggestions like integrating browserlist, @babel/preset-env with no luck. I completely upgraded from babel 6 to babel 7 to see if that was the issue and nothing changed.
Here are my Dependencies and Dev Dependencies:
...ANSWER
Answered 2020-Jul-25 at 23:45Preset-env doesnt support ie 11 by default. You have to configure it as a minimum supported version. https://babeljs.io/docs/en/babel-preset-env#options
QUESTION
I'm trying to save a list of nearby places but through debugging I have realized that the Places services is called before the selected location is assigned. I have tried to look up documentation regarding addListener but I'm very lost because everything relates to the use of a map. However, I only want places. Is there anybody who has faced this problem before?. Any help would be appreciated. This is the code snippet where I try to get NearbyPlaces
...ANSWER
Answered 2020-Jul-03 at 13:30You are not waiting for the first two methods to finish to call the third. If you use then() catch(), you should put your logic inside the then() callback to have it defined. Else you can use await
change it to:
QUESTION
I am trying to setState of the address and coordinates as given by the "react-places-autocomplete". I have already stored those components by only issue is in updating it However, the changes are not updating and even though the program compiles as soon as I select a place it crashes. Especially for getLatLng there isn't enough documentation for me to understand if I have to access another component within that. How do I update the state of the address and coordinates via handleSelect?. Thanks!
...ANSWER
Answered 2020-Jun-20 at 04:18geocodeByAddress
and getLatLng
are asynchronous functions so you have to wait these function until receiving data (read more about geocodeByAddress
here). In handleSelect
, results[0]
is undefined when selecting, so that why your component is crashed. You should try this:
QUESTION
I have a problem with updating a variable on my API link. So this should work that at the start coords on this API link should be 0,0 (or at the best case it should at first display geonavigator window and after accepting it it should display weather for your coords then after searching for another city at the same place should appear weather for searched city but still dont know how to do it) and this part works but after I search for another city on the search bar the coords on API link (coordinates.lat and coordinates.lng) should change to the coords of searched city and the changed weather should be displayed on the screen but this part doesn't work. Maybe works a bit because it look like the value on coordinates.lat and coordinates.lng are changing everytime I search for any city when I display them after return on
Latitude: {coordinates.lat}
Longtitude: {coordinates.lng}
but weather isn't changing at all, its still displayed for 0,0 coords. I'm sorry for mess in my code but I'm still learning. And also I'm talking about that first api link which is const api =
${proxy}https://api.darksky.net/forecast/1539bbb708779eef3993021296196cb2/${coordinates.lat},${coordinates.lng}
;
...ANSWER
Answered 2020-May-27 at 09:23This will get called only once when it loads/mounts component
QUESTION
ANSWER
Answered 2020-Mar-20 at 12:53When you see some issue like this, you need to first check on the github repository if they are already notified and create an issue so they can fix it soon.
They are taking care of this in the following issue: https://github.com/facebook/create-react-app/issues/8672
QUESTION
I want to connect the application with the rest of my components. But I've got this error:
react-redux v7.2 withRef is removed. To access the wrapped instance, use a ref on the connected component
This is my index.js
...ANSWER
Answered 2020-Mar-03 at 20:13Yes, update Redux-Form to the latest version. The older versions of Redux-Form stopped only worked with React-Redux v5 and earlier.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-places-autocomplete
To use this component, you are going to need to load Google Maps JavaScript API. Load the library in your project.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page