React Google Place Autocomplete

August 19, 2019

Google Places autocomplete is amazing.

It makes address extremely simple. I personally like to use their place id and formatted address instead of trying to parse it and manage the address manually.

Here is a quick example on how use use google places with react.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class AutocompleteInput extends Component {
  constructor(props) {
    super(props);

    this.autoCompleteInput = React.createRef();
    this.autocomplete = null;

    this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
  }

  componentDidMount() {
    this.autocomplete = new google.maps.places.Autocomplete(
      this.autoCompleteInput.current,
      { 'types': ['geocode'] }
    );

    this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
  }

  handlePlaceChanged(){
    const place = this.autocomplete.getPlace();
    const { location } = place.geometry;

    this.props.onChange({
      lat: location.lat(),
      lng: location.lng(),
      placeId: place.place_id,
      formattedAddress: place.formatted_address,
    })
  }

  render() {
    return (
      <input type="text"
             name="address"
             placeholder="Enter address"
             value={this.props.value}
             ref={this.autoCompleteInput} />
    );
  }
}

AddressAutoCompleteInput.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default AddressAutoCompleteInput;

Here is an example on how to use it:

import React, { Component } from 'react';
import AutocompleteInput from 'autocompleteInput';

export default class Address extends Component {
  constructor(props) {
    super(props);

    this.state = {
      lat: 0,
      lng: 0,
      placeId: null,
      formattedAddress: '',
    };

    this.addressChange = this.addressChange.bind(this);
  }

  addressChange({ lat, lng, placeId, formattedAddress }){
    this.setState({
      lat,
      lng,
      placeId,
      formattedAddress,
    })
  }

  render() {
    return (
      <AutocompleteInput value={this.state.formattedAddress} onChange={this.addressChange} />
    );
  }
}

Search