react-google-maps StandaloneSearchBox set specific country restriction?

Question

I am trying to set a specific country restriction using react-google-maps StandaloneSearchBox.

I have tried componentRestrictions, but I'm not sure how to use it.

Sharing my code below:

    export const AutoCompleteSearchBox = compose(
    withProps({
      googleMapURL:googleMapUrl,
      loadingElement: <div style={{ height: `100%` }} />,
      containerElement: <div style={{ height: `400px`, top:'3px' }} />,
    }),
    lifecycle({
       componentWillMount() {
         const refs = {}
         this.setState({
           types: ['(regions)'],
           componentRestrictions: {country: "bd"},
           onSearchBoxMounted:ref =>{ refs.searchBox = ref; },
           onPlacesChanged:()=>{ 
             const places = refs.searchBox.getPlaces(); 
             this.props.onPlacesChanged(places); 
           },
         })
         const options = {
          types: ['(regions)'],
          componentRestrictions:{ country: 'bd' }
          }
       },
     }),
     withScriptjs  
   )`(props =>
     <div data-standalone-searchbox="">
       <StandaloneSearchBox 
            ref={props.onSearchBoxMounted} 
            bounds={props.bounds} 
            onPlacesChanged={props.onPlacesChanged} 
            controlPosition={ window.google.maps.ControlPosition.TOP_LEFT}
        >
       <TextField 
            className={props.inputClass}
            placeholder={props.inputPlaceholder}
            label={props.inputLabel}
            name={props.inputName} 
            value={props.inputValue}
            onChange={props.inputOnChange}
            helperText={props.inputHelperText}
            error={props.inputError}
        />
       </StandaloneSearchBox>
     </div>
   );`

How can I solve this problem?

Answer 1

You can't add such restrictions for the SearchBox results, but you can specify the area towards which to bias query predictions. Predictions are biased towards, but not restricted to, queries targeting these bounds.

If you want to show only specific places, then you can Google Place Autocomplete feature. For it you don't event need to use additional React libraries for Google Maps. Here's the example:

import React, { Component } from 'react';
import Script from 'react-load-script'

class LocationMap extends Component {

    handleScriptLoad() {
        const inputEl = document.getElementById('address-input');

        /*global google*/
        var options = {
            //types: ['address'],
            componentRestrictions: {country: 'by'}
        };
        this.autocomplete = new google.maps.places.Autocomplete(inputEl, options);
        this.autocomplete.addListener('place_changed', this.handlePlaceSelect.bind(this));
    }

    handlePlaceSelect() {
        console.log(this.autocomplete.getPlace());
    }

    render() {
        return (
            <section>
                <Script
                    url="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=3.33&libraries=places&language=en&region=US"
                    onLoad={this.handleScriptLoad.bind(this)}
                />        

                <div className="form-group">
                    <label htmlFor="address-map">Enter address</label>
                    <input type="text"
                           autoComplete="new-password"
                           className="form-control"
                           id="address-input"
                           name="address"/>
                </div>
            </section>
        );
    }
}

export default LocationMap;

Don't forget to add react-load-script package: npm i react-load-script --save