@react-google-maps/api Autocomplete strict the result to specific region with bounds

Question

I am using @react-google-maps/api package for Autocomplete result. But I am trying to get result only from Mallorca island, Spain.

const bounds = {
    north: 39.980392,
    south: 39.254704,
    east: 3.463581,
    west: 2.263324,
}

const restrictions = {
    country: 'es',
}

... ... ... ...

  render() {
    return (
        <div className="p-8">
            <LoadScript
                googleMapsApiKey="My API Key"
                libraries={["places"]}
            >
                <Autocomplete
                   onLoad={this.onFromLoad}
                   onPlaceChanged={this.onFromPlaceChanged}
                   bounds={bounds}
                   restrictions={restrictions}
                >
                  <TextField
                      className="mb-6 w-full"
                      label="From"
                      onChange={this.handleChange}
                      type="text"
                      name="from"
                      value={this.state.from}
                      validators={["required"]}
                      errorMessages={[
                         "this field is required"
                      ]}
                   />
               </Autocomplete>
           </LoadScript>
        </div>
     )
  }

The result is restricted to only country (Spain). Not restricted to specific bounds region.

Please help me.

score 0 · Answer 1 · answered Oct 04 '22 at 02:21

It took me a while to find the answer. It is simple. You just need to add the options property to the autocomplete component with strictBounds: true inside it. Your code should look like this:

const bounds = {
    north: 39.980392,
    south: 39.254704,
    east: 3.463581,
    west: 2.263324,
}

const restrictions = {
    country: 'es',
}

const options = {
    strictBounds: true,
};

... ... ... ...

render() {
    return (
        <div className="p-8">
            <LoadScript
                googleMapsApiKey="My API Key"
                libraries={["places"]}
            >
                <Autocomplete
                   onLoad={this.onFromLoad}
                   onPlaceChanged={this.onFromPlaceChanged}
                   bounds={bounds}
                   restrictions={restrictions}
                   options={options}
                >
                  <TextField
                      className="mb-6 w-full"
                      label="From"
                      onChange={this.handleChange}
                      type="text"
                      name="from"
                      value={this.state.from}
                      validators={["required"]}
                      errorMessages={[
                         "this field is required"
                      ]}
                   />
               </Autocomplete>
           </LoadScript>
        </div>
     )
  }

You can also do other things like filter the google maps recommendations by type (eg only cities; or only shops and restaurants, and so on). See: https://stackoverflow.com/a/40477126/19294516

Hope this might be useful to someone

@react-google-maps/api Autocomplete strict the result to specific region with bounds

1 Answers1