Tintef/react-google-places-autocomplete

City Filtering

1sahinomer1 opened this issue · 4 comments

Hi,

I want only suggestions for a city in a country.
I did a lot of research, I also tried locations such as bounds, but I couldn't get much result.

For example, I want to display only the results for Istanbul for Turkey.

I would be very grateful if anyone can help with this. Thanks for your help.

Looks like you want to use types on the autocompletion request (see here)

If that one doesn't solves your use case, maybe you need to use region, which is not currently supported but is an easy thing to add. PR for it welcomed.

Hello @Tintef

I add this apiOptions={{ language: 'fr', region: 'fr' }} but still I can see another country results.

use like this it will work for you :

<GooglePlacesAutocomplete
        className="nosubmit"
         apiKey="YOUR_API_KEY"
         apiOptions={{ region: 'IN' }}
         selectProps={{
                   styles: {
                        input: (provided) => ({
                               ...provided,
                                color: 'black',
                        }),
                        option: (provided, state) => ({
                                ..provided,
                                backgroundColor: state.isFocused ? '#93294B' : 'transparent', // Change background color on hover
                                color: state.isFocused ? 'white' : 'black'
                         }),
                         singleValue: (provided) => ({
                              ...provided,
                              color: 'black',
                         }),
            },
                  value,
                  onChange: setValue,
                  placeholder: 'Enter a location...
}} / >

If you want addresses to be shown only for a certain country, the way to do it is with the prop autocompletionRequest

<GooglePlacesAutocomplete
    apiKey={API_KEY}
    autocompletionRequest={{
        componentRestrictions: {
            country: "ZA",
        },
    }}
/>