Material-ui - Google autocomplete address

Question

I use Material-Ui in my React application and I am trying to add an input google autocompletion for addresses into my form.

Here is my problem, I have found this library https://github.com/ErrorPro/react-google-autocomplete which integrates the google maps API for places, but the input looks like the most basic input, i.e with 0 style.

For now my code looks like this :

<Autocomplete
onPlaceSelected={(place) => {
    console.log("Place selected", place);
}}
types={['address']}
/>

This code works fine and prints the address, the simple problem is that the input has the default look and feel, and I want it to have the material-ui one.

I have also looked at this library https://github.com/ydeshayes/googlePlaceAutocomplete which seems to be exactly what I want but I can't make it work and it seems to be not much documented. So I tried to write a code like this :

<GooglePlaceAutocomplete 
    onChange={this.onAutoCompleteInputChangeFct.bind(this)}
    onNewRequest={this.onClickLocationFct.bind(this)}
    name={'location'}
/>

But with this code I have my input but when I type in it the suggestions so it seems that it doesn't work.

So my question is: Is there a way to wrap the AutoComplete component into the TextField element from material-ui ?

Answer 1

In a nutshell, you grab a ref to the <input /> DOM element rendered by the TextField, then in componentDidMount() you do your google.maps.new places.Autocomplete() as normal. In the Autocomplete's place_changed event, you'll either do something with that like pass it to a Redux action or a callback/handler that was supplied by the parent (e.g. onPlaceChanged)

Here is a jsFiddle with a little bit of CSS added to make it look nice. It assumes Google places API is already loaded in browser: https://jsfiddle.net/e0jboqdj/3/

class LocationSearchBox extends React.Component {
  componentDidMount() {
    if (typeof google === 'undefined') {
      console.warn('Google Places was not initialized. LocationSearchBox will not function.');
      return;
    }

    const { country, onPlaceChanged } = this.props;
    const { places } = google.maps;

    let options;

    if (country) {
      options = {
        componentRestrictions: { country }
      };
    }

    const input = this.locationSearch;

    input.setAttribute('placeholder', '');

    if (!input._autocomplete) {
      input._autocomplete = new places.Autocomplete(input, options);

      input._autocomplete.addListener('place_changed', () => {
        onPlaceChanged && onPlaceChanged(input._autocomplete.getPlace());
      }.bind(input._autocomplete));
    }
  }

  render() {
    return (
      <span>
        <TextField ref={ref => (this.locationSearch = ref.input)} hintText="Search nearby" />
      </span>
    );
  }
}