Hi @cedricdelpoux! Thank you for this library, its looks promising!

1. I was wondering if there is supports or plans to add support for location, radius and different result formats (address component types) as mentioned here: https://developers.google.com/maps/documentation/javascript/geocoding
2. How do you suggest we handle the case where no result is found in the auto-suggest? Is it possible for the input field to just take the string inputted and pass that as a value (or is that already being done?)

Thanks again!

Hi, I am trying to made a place suggest with only a particular place type of Table 1 like restaurant for example.
Do you have an idea how I can print in the suggest only restaurant for example.
I need to use : type: ['restaurant']
Do you think it is possible to add it in params of the ReactGoogleMapLoader component ?
Thanks for your answer ;)

am I missing something? no name property in the response

I am looking to give feedback to the user that "No results were found" if they press enter when no predictions are populated.

I would like to display custom text outside of the input box.

Hi @xuopled,

I'm trying to get the postcode but I can not figure out how. At the moment I receive this string: "St Kilda, Victoria, Australia" but I need "St Kilda, Victoria, Australia, 3000"

I'm using this prop suggestTypes={['(cities)']} to get the required info from the API , which should according to Google's documentation either use the type locality or administrative_area_level_3. The type postal_code will actually return the postcode/zipcode.

There are two events fired to get the final data

https://maps.googleapis.com/maps/api/js/GeocodeService.Search?4sSt%20Kilda%2C%20Victoria%2C%20Australia&7sUS&9sen-US&key=...

which returns the postcode in the "address_components" property of the response JSON

https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictionsJson?1sSt%20Kilda%2C%20Victoria%2C%20Australia&4sen-US&6m6&1m2&1d-0.0001796630568239043&2d-0.00017966305676964112&2m2&1d0.0001796630568239043&2d0.00017966305676964112&7scountry%3Aau&9s(cities)&15e3&key=....

which has no "address_components" property.

I'm wondering whether there is a way to incorporate this property in the final response JSON.

How to get rid of this message?

"It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes you application bigger without a good reason."

I'm trying to pass custom textNoResults property to GooglePlacesSuggest component, but no results placeholder remains unchanged. Also, I can't find textNoResult usages in src/components/List/index.js.

I am aware that I can use textNoResults to change the "no results found" text but I would like to not to show the dropdown if there isn't any location found.

For example, if an user types an address which isn't available, it will simply behave like a textbox.

If we have an option to turn on/off this feature would be awesome :)

Also, is there anyway I can display only the full address on the suggestion instead of generic results like "Paris, France", "Delhi, India" ...etc

Thanks again for your wonderful work.

Hi,

I'm trying to limit searches to the city names, as I understood 'suggestComponentRestrictions' could do the work.

I tried with countries.

const country = {country: 'fr'};

<GooglePlacesSuggest
suggestComponentRestrictions={country}

It doesnt seems to work, is there are something wrong I'm doing? And Google Api accepts (region) parameter wich should restrict result to city names. Can it be used with suggestComponentRestrictions?

i'm trying to get only nearby places in the search result, not the result from anywhere in the world.

i guess people are using radious option for that .
here is one related stackoverflow topic.

can we do that using this package?
i'm using this in a large project.

Hi,
I've installed react-google-places-suggest and react-google-maps-loader, but when I'm trying to build them, I'm getting error Cannot find module 'styled-components' from 'node_modules/react-google-places-suggest/lib'.
I don't see any styled-components dependency from react-google-places-suggest (and see in react-google-maps-loader but it's installed locally for it) so it's missing.
Do I miss something?

Btw it's not obvious to install react-google-maps-loader to make work react-google-places-suggest. For my opinion, better to move it to dependencies section. What do you think? It can save us from having unsupported combinations of libraries. And it can be exposed something like this:

// index.js
import GoogleMapsLoader from 'react-google-maps-loader';
import GooglePlacesSuggest from './GooglePlacesSuggest';

export {
  GoogleMapsLoader,
  GooglePlacesSuggest ,
};

// some user file
import { GoogleMapsLoader, GooglePlacesSuggest } from 'react-google-places-suggest';

Hi! First of all thank you for building this great little component.

I've started getting this error recently, using version 3.12.1:

InvalidValueError: not an instance of AutocompleteSessionToken

It happens when you type something, select a place, and then start typing something else (starting a second session). I suspect it has something to do with reusing the session token as implemented in #78. The problem disappears when I downgrade to version 3.11. Could it be that Google does not want us to reuse session tokens? Does anyone have any idea?

how to restrict it to a single country?

Thank you for this module. We'd like to be able to apply more styles to it using CSS, but it hasn't proven possible due to the way that styles are applied in this project.

I've made a fork that uses css classes instead of the current styling mechanism, and adds class names to every element. This makes it very easy to style.

https://github.com/karlvr/react-google-places-suggest

This removes the use of the styled-components dependency. I have put the default styles into a sample.css file. I figure that users can take what they'd like from those styles. I thought about trying to include it in the component build; couldn't work out how to; and it would make it a bit more work to override the existing styles.

This is obviously quite a change, so I'm not sure that you'd like to merge this. Perhaps you can think of a way to retain the existing behaviour, while supporting a className-based styling model. Whatever happens, I'm interested in your thoughts on this!

Best,
Karl

Every time I install a library that uses this library I get prompted to give money to styled-components.

I don't want to use styled-components, would you be open to a PR that removed usage of this lib?

The google maps auto-suggest api has become a bit aggressive, so it now always shows suggestions even when a unit number is put in that stops any of the suggestions from matching the input string.
The result of this is that when users hit return on an address with a unit number (I.e. 123 Main Street. Apt 12, Springfield Illinois) it gets mapped to 123 Main Street, Springfield Illinois (it gets rid of the unit number).

I’d like to trigger the handleNoResult function if the user hits return without clicking/selecting one of the suggestion options. This would allow me to call the geocodeAPI with the string, which would return the location including the unit number.
Is there a way to stop return from selecting the first autosuggestion and instead call the handleNoResult function?

well this is sample what i wrote:

                   <ReactGooglePlacesSuggest
                                    name="droppingPoint"
                                    autocompletionRequest={{
                                        input: this.state.dropsearch
                                    }}
                                    googleMaps={mapApi}
                                    onSelectSuggest={this.addDroppingPlace.bind(
                                        this
                                    )}
                                >
                                    <input
                                        type="text"
                                        style={{ position: "relative" }}
                                        name="droppingPointInput"
                                        value={this.state.dropvalue}
                                        placeholder="select location"
                                        onChange={this.handledropChange.bind(
                                            this
                                        )}
                                    />
                                ReactGooglePlacesSuggest
                                    name="boardingPoint"
                                    autocompletionRequest={{
                                        input: this.state.boardsearch
                                    }}
                                    googleMaps={mapApi}
                                    onSelectSuggest={this.addBoardingPlace.bind(
                                        this
                                    )}
                                >
                                    <input
                                        type="text"
                                        name="boardingPointInput"
                                        value={this.state.boardvalue}
                                        placeholder="Default is current location"
                                        onChange={this.handleboardChange.bind(
                                            this
                                        )}
                                    />
                                </ReactGooglePlacesSuggest>

i'm trying to use 2 fields, and the issue i'm facing is, when i click on any field, and search for a location [for the 2nd time], it opens the dropdown of the another one too.
like this in the image:

questation is how to handle this issue?
goal is, when i click a particular field say Boarding point it should open the dropdown of that only, not for the dropping point. anything i have missed out?

In the npm, I want to only show the Indian country results not this shows all the results of the other country.

Clicking the link for demo fails

First of all, thank you for your work, the component is a great help in our project :).

There is just one little issue that is bothering us: We are using the component in a search form, for getting real addresses.

The problem is, if you use the keyboard to select a place from the suggest dropdown and hit the enter key the wrapping form got submitted and triggers an error because the response from Google isn't ready.

The problem could be solved if you add a e.preventDefault if the enter key is hit in your handleKeyDown-Method.

If I'm missing something there, your help is highly appreciated.

const suggestComponentRestrictions = {
  country: ["us"],
}

<ReactGoogleMapLoader
  params={{
    key: MY_API_KEY,
    libraries: "places,geocode",
  }}
  render={googleMaps =>
    googleMaps && (
      <ReactGooglePlacesSuggest
        googleMaps={googleMaps}
        autocompletionRequest={{
          input: search,
        }}
        suggestComponentRestrictions={suggestComponentRestrictions}
        onNoResult={this.handleNoResult}
        onSelectSuggest={this.handleSelectSuggest}
        onStatusUpdate={this.handleStatusUpdate}
        textNoResults="No results found"
        customRender={prediction => (
          <div className="customWrapper">
            {prediction ? prediction.description : "No results found"}
          </div>
        )}
      >
        <Input
          autoComplete="none"
          type="text"
          value={value}
          placeholder="Search a high school"
          onChange={this.handleInputChange}
          onFocus={this.handlefocusOut.bind(this)}
        />
      </ReactGooglePlacesSuggest>
    )
  }
/>

This is my piece of code, I want to fetch results from US only but I am not getting the filtered results, can anybody help me with this

Looks like this component need small updates according to match latest React version?

I'm getting warnings about

componentWillMount has been renamed
componentWillReceiveProps has been renamed
Please update the following components: GooglePlacesSuggest

thank you!

As a user types in the input box, the options below begin to highlight the matching strings by setting the font-weight to bold. When the user uses the arrow keys 🔽 🔼 to focus an option the bold font disappears.

Opening this to discuss a feature request.

The callback for getPlacePredictions within AutocompleteService is given the predictions and the service status (doc). At the moment, only the predictions are used.

https://github.com/xuopled/react-google-places-suggest/blob/master/src/index.js#L80

For reference, the full list of statuses are shown here.

My team had an issue with using GooglePlacesSuggest within the context of automated tests: predictions on known good inputs would fail periodically. We modified this component to dump the service status from getPlacePredictions and we discovered we were receiving OVER_QUERY_LIMIT. Since each keystroke was sending a new prediction request (and since the automated tests type very quickly), we were hitting the rate limit on allowable requests per second.

Moving forward, it would be nice if there was...

1. Some input debouncing
2. A way to see the the service status from getPlacePredictions

Since the needs of input debouncing might be different for other people, I'm not sure if input debouncing belongs within this component. Debouncing in a parent component might make more sense, but I wanted to throw this out there.

For the service status, some sort of onServiceStatus callback prop would be nice. The getPlacePredictions callback could then be updated to call onServiceStatus with the service status. This would be helpful for debugging or for performing an action whenever we don't receive the "OK" status.

Hello, here is the problem: if we have more than one insatnce of the component on a page the predictions will be updated for each instance after changing one of the autocomplete requests. updatePrediction function is invoked for all instances in UNSAFE_componentWillReceiveProps.

Currently i'm able to select the item while clicking on the Text of the dropdown element,
but when clicking/touching in the whitespace [ right side of the text] its not working.
Not taking the click.

According to Google's place autocomplete documentation:

Note: When you display predictions from Place Autocomplete, you must include the 'powered by Google' logo. This logo is included in the results list by default, as shown in the above example.

- Source

We can add that ourselves via the component's customContainerRender prop, but it seems like something the component should handle natively / automatically. Do you agree? If so, our team would be happy to contribute a PR to add it to the module.

Hi there,

Love the little library and it works like a charm.

I have a question regarding pre-filling the input with data.

Let's say the react-google-places-suggest is part of a form that needs to be pre-filled with data from a table and the location property is a string such as New York, NY, United States.

I can set the values via state like this:

componentWillMount() {
  this.setState({ search: this.props.selectedData.location })
}

It sets the text correctly but it opens the dropdown. Is there a way to select the correct entry and close the dropdown?

Thanks for your support
Thomas

I am using React 16 and the demo isn't working. It is not passing my API key to the GetPredictions API.

https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictionsJson?1ss&4sen-****omitted****&callback=_xdc_._x648s4&token=641

Here is a snippet of my package.json:
"react": "^16.2.0",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.1",
"react-google-maps-loader": "^4.1.0",
"react-google-places-suggest": "^3.2.2",

<GoogleMapLoader

        params={{
          key: GOOGLE_API_KEY,
          libraries: "places",
        }}
        render={googleMaps =>
          googleMaps && (
            <GooglePlacesSuggest
              googleMaps={googleMaps}
              autocompletionRequest={{ input: search  #}}
              onSelectSuggest={this.handleSelectSuggest.bind(this)}
              textNoResults= "No results"
              customRender={prediction => (
                <div className="customWrapper">
                  {prediction
                    ? prediction.description
                    : "My custom no results text"}
                </div>
              )}
            >
              <input
                type="text"
                value={value}
                placeholder="Search a location"
                onChange={this.handleInputChange.bind(this)}
              />
            </GooglePlacesSuggest>
          )
        }
      /> 

Bonjour Cedric,

Looks like you're doing a great job keeping up with pull requests for dependency vulnerabilities/updates. But I think your package hasn't been updated at npm for a while?

Snyk is warning me about this vulnerability, introduced through the use of styled-components v2.4.1: https://snyk.io/test/npm/react-google-places-suggest/3.9.2

I see you addressed their pull request for that in September: #72, which specifies the use of styled-components v4.0.0.

… but when I try to update the package via npm, the package.json that I get has version: 3.9.2, and

  "dependencies": {
    "styled-components": "^2.4.0"
  },

I believe the solution is to bump up your version number, and republish to npm?

Currently when a suggestion is selected, the callback only gets the geocoding result, and never the suggestion itself. Since the result only contains the address information, and not the name of the place itself, it would be useful to return to the callback the suggestion, so the parent can use the suggest.description

When using 3.1.0, under React 16 I get an error running yarn incorrect peer dependency "react@^15.6.0" and incorrect peer dependency "react-dom@^15.6.0"

Does this plugin support React 16, and if not, are there any plans to update it?

Hi, I followed the instruction to do the installation but it throws 'document is not defined error' . Here is the error log,

node_modules/react-google-places-suggest/lib/index.js:6
!function(s,u){"undefined"!=typeof e&&e.exports?e.exports=u():(o=u,r="function"==typeof o?o.call(t,n,t,e):o,!(void 0!==r&&(e.exports=r)))}("$script",function(){function e(e,t){for(var n=0,o=e.length;o>n;++n)if(!t(e[n]))return l;return 1}function t(t,n){e(t,function(e){return!n(e)})}function n(s,u,a){function l(e){return e.call?e():g[e]}function i(){if(!--v){g[y]=1,m&&m();for(var n in d)e(n.split("|"),l)&&!t(d[n],l)&&(d[n]=[])}}s=s[c]?s:[s];var f=u&&u.call,m=f?u:a,y=f?s.join(""):u,v=s.length;return setTimeout(function(){t(s,function e(t,n){return null===t?i():(t=n||-1!==t.indexOf(".js")||/^https?:///.test(t)||!r?t:r+t+".js",h[t]?(y&&(p[y]=1),2==h[t]?i():setTimeout(function(){e(t,!0)},0)):(h[t]=1,y&&(p[y]=1),void o(t,i)))})},0),n}function o(e,t){var n,o=u.createElement("script");o.onload=o.onerror=o[f]=function(){o[i]&&!/^c|loade/.test(o[i])||n||(o.onload=o[f]=null,n=1,h[e]=2,t())},o.async=1,o.src=s?e+(-1===e.indexOf("?")?"?":"&")+s:e,a.insertBefore(o,a.lastChild)}var r,s,u=document,a=u.getElementsByTagName("head")[0],l=!1,c="push",i="readyState",f="onreadystatechange",g={},p={},d={},h={};return n.get=o,n.order=function(e,t,o){!function r(s){s=e.shift(),e.length?n(s,r):n(s,t,o)}()},n.path=function(e){r=e},n.urlArgs=function(e){s=e},n.ready=function(o,r,s){o=o[c]?o:[o];var u=[];return!t(o,function(e){g[e]||uc})&&e(o,function(e){return g[e]})?r():!function(e){d[e]=d[e]||[],d[e]c,s&&s(u)}(o.join("|")),n},n.done=function(e){n([null],e)},n})},function(t,n){t.exports=e}])})},function(e,t,n){var o;/*!

ReferenceError: document is not defined
at /node_modules/react-google-places-suggest/lib/index.js:6:990
at n (/node_modules/react-google-places-suggest/lib/index.js:6:59)
at Object.t.exports (/node_modules/react-google-places-suggest/lib/index.js:6:139)
at t (/node_modules/react-google-places-suggest/lib/index.js:1:5385)
at Object. (/node_modules/react-google-places-suggest/lib/index.js:1:6121)
at t (/node_modules/react-google-places-suggest/lib/index.js:1:5385)
at e.__esModule.default (/node_modules/react-google-places-suggest/lib/index.js:1:5472)
at /node_modules/react-google-places-suggest/lib/index.js:1:5477
at n.(anonymous function).exports (/node_modules/react-google-places-suggest/lib/index.js:1:5247)
at Object.e (/node_modules/react-google-places-suggest/lib/index.js:1:5255)
at t (/node_modules/react-google-places-suggest/lib/index.js:1:417)
at Object.t.exports (/node_modules/react-google-places-suggest/lib/index.js:1:1311)
at t (/node_modules/react-google-places-suggest/lib/index.js:1:417)
at e.__esModule.default (/node_modules/react-google-places-suggest/lib/index.js:1:504)
at /node_modules/react-google-places-suggest/lib/index.js:1:509
at n.(anonymous function).exports (/node_modules/react-google-places-suggest/lib/index.js:1:81)
/tools/runServer.js:71
throw new Error(Server terminated unexpectedly with code: ${ code } signal: ${ signal });

Hi. I'm new to react especially on enzyme testing. Using the react-google-places-suggest, I was able to encounter errors like "TypeError: Cannot read property 'places' of undefined". Another is "TypeError: Cannot read property 'AutocompleteService' of undefined." May I ask if you have any workaround/sample on testing this component? I need advise. Thanks much.

I am using this component just like in the demo. Everything works fine, however, there is one small issue with the suggestion dropdown list. Whenever I enter a value, the suggestions list is rendered, I click on the option that matches my search, and the input field gets populated by the value. However, immediately after this happens, the suggestions list gets rendered again with new options based on the choice that I just selected from the first time the list was displayed. Is there a way to prevent the suggestions list from displaying after you have already selected an option the first time?

Hello,
I didn't find where to add filter like filter the results to show only countries or cities.
Thank you for your feedback.
Kévin

Steps to reproduce: go to the example page, type something in the input, then click outside the suggestions fragment

Desired behavior: Suggestions are hidden after the input loses the focus

... maybe if you expose the open var

Do you have an option to set the fields to the component? fields like utc_offset and vicinity?

I have installed this package in my project but when I try to import it into one of my React classes, it says that it cannot find the module.
I have searched for the folder in the node_modules folder and it is there.
Is there anything else I should do?

Hi,

I want to show current location when the component is mounted rather than showing an empty dropdown.

When I am providing search prop to achieve this it is opening dropdown to show the suggestion which I don't want.

can I open PR for this?

If I'm only interested in the result from the autocomplete, is there a way to skip the geocoding step? The only way I can think of currently is to subclass the component and override handleSelectPrediction. It would be nice if I could pass in a boolean prop so I can just get back the result of the selected prediction.

i installed the latest version (3.2.1) using npm 8.9 and the pckage installed missing "lib/index.css" file

other libraries are installed with theier csses

now this npm give the suggestions for the all country how we can restrict it only for india

Is it possible? if it is, could you point me to an example?

Thank you for this library

I'm only getting API_KEY via props, is there a way to pass that to GoogleMapLoader?

at first it was working fine but in between my development time, i updated my code and npm after that i was unable to type any thing in the react-google-places-suggest search bar due to some issue even i am unable to get through it.

provide some better solution to it and if it is the issue from library do rectify it asap