Autocomplete radius search not working in my google maps

Question

i want to implement radius on my gmaps Autocomplete place search,so i can get search hint from that radius first.

my code

var options = {
        types: [],
        componentRestrictions: {
            'country': 'IN'
        },
        location : { lat: 17.3850, lng: 78.4867 },
        radius : 5000
    };
    let inputPick = document.getElementById('pick');
    const autocompletePick = new google.maps.places.Autocomplete(inputPick, options);

    google.maps.event.addListener(autocompletePick, 'place_changed',  () => {
        let place =autocompletePick.getPlace();
        // console.log(place.name)
        // document.getElementById('pick').value = place.name;
        this.setState({pickAddress:place.name})
        let lat = place.geometry.location.lat(),
            lng = place.geometry.location.lng();
        //putting place in pick field
        let geocoder = new google.maps.Geocoder;
        geocoder.geocode({'location': {lat:lat,lng:lng}}, function(results, status) {
            if (status === 'OK') {
                // console.log(results[0].formatted_address)
                document.getElementById('pick').value = results[0].formatted_address;
            }
        })

but right now i'm getting all over country place .
i search on google but didn't get proper solution.can anyone help me,i''m stuck ):

Answer 1

If you check the Google Maps JavaScript API reference documentation, you will see that AutocompleteOptions object doesn't have location and radius fields

https://developers.google.com/maps/documentation/javascript/reference/3/#AutocompleteOptions

Instead it has bounds field to define an area where you would like to search and strictBounds field to restrict results to this area only.

You should rewrite your code with bounds and strictBounds autocomplete options. Something like

var options = {
    bounds: cityBounds,
    strictBounds: true,
    types: ['geocode'],
    componentRestrictions: { country: "IN" }
};

Have a look at bounds documentation for more details

https://developers.google.com/maps/documentation/javascript/reference/3/#LatLngBounds

https://developers.google.com/maps/documentation/javascript/reference/3/#LatLngBoundsLiteral

I hope this helps!