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?

Welcome to Stackoverflow. Please edit your question to clarify your problem. Tell us what you tried and possible add more tags. For guidance please read [how to ask questions](https://stackoverflow.com/help/how-to-ask) and [how to create a minimal example](https://stackoverflow.com/help/mcve). Otherwise you might not find answers — 5th, Sep 20 '18 at 15:23

Alex · Accepted Answer · 2018-09-21T18:58:50.520

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

Thank you very much, I appreciate your reply. But it is giving me an error `'google' is not defined`. Can you please help on that. Or is there any other way to restrict country without using "StandaloneSearchBox"? — Tanmoy Mondal, Sep 21 '18 at 07:17
@TanmoyMondal This is because you need to include Google Map API in the header of the HTML file or use withScriptjs component to wrap your StandaloneSearchBox. Please, check my updated answer. — Alex, Sep 21 '18 at 16:05
GREAT! thanks, it's really helpful. But having another problem, want to show the direction map as well. But when calling the map from another component, it's giving an error of multiple map API include. "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors." — Tanmoy Mondal, Sep 24 '18 at 14:37
If you already have Google Maps included somewhere inside of your index.html file, then you should remove component (because it's trying to load it one more time) and move map initialization logic from handleScriptLoad() to componentDidMount() function. — Alex, Sep 24 '18 at 15:04
If my answer solves your problem, please mark it as a solved. — Alex, Sep 25 '18 at 13:02

react-google-maps StandaloneSearchBox set specific country restriction?

1 Answers1