errorpro / react-google-autocomplete Goto Github PK
View Code? Open in Web Editor NEWReact components for google places API.
License: MIT License
React components for google places API.
License: MIT License
I don't know if someone here has the solution to my problem but when I run webpack-dev-server
everything works as expected but when I run webpack -p
I don't see any errors but the component doesn't show up.
Here are some of my dependencies :
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-google-autocomplete": "^1.0.11",
"react-tap-event-plugin": "^2.0.1",
"material-ui": "^0.16.4"
I tried a lot of thing but it's only when I remove <Autocomplete onPlaceSelected={(place) => { console.log(place); }} types={['address']} style={ inputStyle } />
that I can get a working code, and I have nothing logged to tell me where is the error...
Do you have any ideas ? Let me know if you need more informations
ReferenceError: google is not defined
Hey, I am using this module in my app but I am unable to set the bounds for a search. Do you have a written code example of bounds usage in this module?
Basically, when user types "New York" but you don't select exactly what the autocomplete returns, I need to select the first option.
I will really appreciate your help.
Thanks in advance!
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead
is there any rationale behind making the types props to be defaulted to (cities)? Can it not me made optional like bounds and componentRestrictions
I recently stumbled upon a requirement that allows me to consider all the autocomplete suggestions
According to google docs,
If nothing is specified, all types are returned
https://developers.google.com/places/web-service/autocomplete#place_types
Edit : I can make it work using this code block, passing the types as empty array
<Autocomplete
style={{width: '90%'}}
onPlaceSelected={(place) => {
console.log(place);
}}
types={[]}
componentRestrictions={{country: "ru"}}
/>
After upgrade from [email protected] to [email protected] I started to get warnings like:
warning.js?8a56:44Warning: Unknown prop onPlaceSelected
on on tag. Remove this prop from the element.
After updating to 1.0.14 I am getting the above error in the console when unmounting the component. Most like related to changes from f89fb0f.
Please add a license to this project.
This module is very useful but I'd like some clarity in knowing the license to the project. The pull request of adding placeTypes would be make this extremely useful.
When I try to style the component with Bootstrap (in accordance with best practices for globally-scoped CSS using CSS modules), nothing happens.
<Autocomplete className="input-group" />
renders the same as <Autocomplete />
Hi,
I am using react-google-autocomplete but when i search i need to get
(regions)
establishment
types can anyone tell me how to include more than one types in that component.?
Hello. I am using your autocomplete in my application and it's working very well, but I would like to know how I can get the Latitude and Longitude of the selected place. The data seems to be under geometry->location->lat->[[Scopes]][0] but I cannot access the data in [[Scopes]]. How would I get the latitude and longitude?
Hi is there anyway that i could get the value of the coordinates?
Is it possible to prevent default behaviour of the enter button when interacting with the dropdown? Or prevent event propagation.
I'm using this inside filters, Now I need to reset location to empty when clicked clear filter button, any idea.
With the most recent version @1.0.17, we are seeing a new error pop up:
Uncaught TypeError: Cannot set property 'autocomplete' of undefined
Without diving in too much it looks like the ref on line 41 of index.js isn't being set or accessed properly. Any help would be fantastic.
Are there any ways to set custom styles to dropdown?
i want to know if on pressing enter is it possible to search the position. we have only onPlaceSelected funtion to work with.
Suggestions not coming in mobile android mozilla firefox untill you press space or symbols like "."
is it possible to get input text of Establishment ? my code
<Autocomplete
style={{width: '100%'}}
placeholder="Input Establishment Name"
onPlaceSelected={(place) => {
console.log(place)
}}
types={['establishment',]}
componentRestrictions={{country: "lk"}}
name="place_name"
value={this.state.place_name}
onChange={this.handleInputChange}
/>
Hello, the input is below the map instead of on the top of it, styling does not change it
Is it possible to set componentRestrictions for example I only want to show a specific country.
'disable-autofill' for autocomplete
does not seem to work, but off
does. Would you be open to switching it?
Officially putting in an issue for documentation purposes. Please accept our PR as a fix #56. Thank you!
We are seeing a sporadic issue in production and have narrowed down the source to this line from our Honeybadger reports. Hopefully this will help others as well.
Is there a way to initialize the input with a place? I set it to the full address text of the place right now, but it doesn't do a lookup onmount.
i am getting error
trying to use google autocomplete with react but need movable marker in the map. is it possible to modify this version with the requirement? any hint on it.
👋 We are seeing 359 occurrences in production with the error: null is not an object (evaluating 'this.event.remove')
. We were using version 1.1.0 of this library and will be upgrading to latest as soon as possible.
I am submitting a PR shortly to defensively check for the existence of this.autocomplete.
how to change Autocomplete placeholder text ?
Thank you
When using the default example, this error is returned in the console.
Here: https://github.com/ErrorPro/react-google-autocomplete/blob/master/src/index.js#L19-L23
Instead of constructing this config object, can we pass it into the component through an attribute? The structure of this object is defined by Google, so this library only increases its maintenance burden by also knowing how to correctly create this config object. I imagine Google will be changing the options on this option in the future, so I want to avoid forcing us to make a new commit and new release of this library to support the new options.
If you think it's not a bad idea, I can make a PR.
I'm using this on an edit form and am trying to load a previous address into it. What's the best way to go about this?
Hello ,
I was trying to change the default input placeholder , is there any chance to have an attribute for that please?
Thanks
Aziz
I am developing an application, in Ionic, where you can plan a trip with a start address and an end address. However, I want to limit this feature to only one country. Before writing I have been searching for solutions on the internet, but none of them worked for me.
Have tried these suggestions:
https://stackoverflow.com/a/8282093/8130808
https://stackoverflow.com/a/10170421/8130808
Here is how I have tried to approach it:
I get the input from an alert dialog
newRouteInput() {
let alert = this.alertCtrl.create({
title: 'New route',
inputs: [
{
name: 'routeStart',
placeholder: 'Start of route'
},
{
name: 'routeEnd',
placeholder: 'End of route'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Debug start and end',
handler: data => {
if (data.username !== "undefined") {
console.log(data.routeStart + " " + data.routeEnd);
this.routeStart = "Malmö";
this.routeEnd = "Berlin";
this.newRoutePlaceMarks(this.map);
this.routeButton = false;
} else {
return false;
}
var input = document.getElementById(data.routeStart + " " + data.routeEnd);
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(input);
}
},
{
text: 'Place route markers',
handler: data => {
if (data.username !== "undefined") {
this.routeStart = data.routeStart;
this.routeEnd = data.routeEnd;
this.newRoutePlaceMarks(this.map);
this.routeButton = false;
} else {
console.log(data.routeStart + " " + data.routeEnd);
return false;
var input = document.getElementById(data.routeStart + " " + data.routeEnd);
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(input);
}
}
}
]
});
alert.present();
}
When I run this I get an error because of data.routeStart + " " + data.routeEnd
. What's the solution? :)
There is no clear exposed API for setting the fields on the Autocomplete instance. This is not ideal, as someone using this library might not realize google includes all fields by default, charging you for the additional apis that those fields may involve. To put it into context, someone who definitely isn't me used this in production and was charged $1400 for places API (expected) and an additional $700 for "atmosphere" and "contacts" data (unexpected)
For such an important configuration, there should be a first-class configuration option to handle this.
Currently, I have a ref on the input and am able to add my own config this way:
componentDidMount() {
this.inputRef.current.autocomplete.setFields(['formatted_address', etc.])
}
Hi. Here is a list of changes we are going to make eventually. Feel free to comment on anything you have in your mind.
while I'm initialization I'm getting following error
InvalidValueError: setComponentRestrictions: in property country: not a string; and not an Array
following is the initialization code.
<Autocomplete
className="location-autofill"
onPlaceSelected={(place) => {
props.formatLocationAddress(place);
}}
types={[]}
/>
Can you publish a new version?
I see that you removed the <div>
here that used to wrap the <input>
.
This update would be useful as the extra div
is annoying as I have to take it into account when styling this component.
I am using this inside the form.
Some times it displays the suggestions, but sometimes it won't.
especially if the user entered some information in the other input fields of the form.
The issue is that the list retrieve a pre formatted value that is not possible to create with the place json
Hi,
Has anyone been able to change the field styling as per material-ui styles? I have found the following link which explains all the relevant classes but it is being quite a mess to achieve it.
Any clues and answers would be very welcome!
Cheers.
Alejandro.
i am getting below error.
"You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account For more information on usage limits and the Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/usage"
i want autocomplete call api after 3 char or 5 char currently it get hit on first char,
Cant get chrome autofill to disappear:
Here is what the code looks like. I am using it with redux-form and autofill three hidden fields based on selection.
<Autocomplete
onPlaceSelected={(place) => {
autofill('address', place.formatted_address);
autofill('coordinates.latitude', place.geometry.location.lat().toString());
autofill('coordinates.longitude', place.geometry.location.lng().toString());
}}
types={['establishment', 'geocode']}
className="form-control"
placeholder="Number Street, City, State, Country"
autoComplete="address-autocomplete"
{...input}
onKeyPress={e => {
if (e.key === 'Enter') e.preventDefault();
}}
/>
any help would be greatly appreciated.
Hi,
I would know if there is a possibility to manually change the value which is shown in the textfield ? Or to bind it.
I work with the map and for some reason i would let people to choice between search for an adresse through your autocomplete component or by clicking on the map.
Best regard
we should able to pass value in ref of as props.
Hello,
I am trying to use this autocomplete component. For now this is only suggesting cities as types = cities is hardcoded. Can this be extended for 'address' type?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.