react-google-places-component

Usage

First install GooglePlaces component

$  npm install react-google-places-component

Add the following script tag to your HTML. Include your API key for "Google Places API Web Service".

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&libraries=places"></script>

Component API

<GooglePlaces
  options={{input: 'poetic systems'}}
  itemComponent={Place}
  itemProps={{onClick: onClickPlace}}
/>

options

AutocompletionRequest object specifications being sent through getPlacePredictions().
For more details:
https://developers.google.com/maps/documentation/javascript/places-autocomplete#place_autocomplete_service
https://developers.google.com/maps/documentation/javascript/reference#AutocompleteService

itemComponent

React component that will be rendered for each prediction.

itemProps

Pros that will be passed to each itemComponent.

Example

import React from 'react';
import GooglePlaces from 'react-google-places-component';

const Place = ({prediction, onClick}) => {
    return (
      <div onClick={onClick.bind(this, prediction.description)} className='item-component'>
        {prediction.description}
      </div>
    )
}

const Places = function({onClickPlace}) {
  return <GooglePlaces
    options={{input: 'poetic systems'}}
    itemComponent={Place}
    itemProps={{onClick: onClickPlace}} />
}

Resources

• https://developers.google.com/places/web-service/autocomplete#place_autocomplete_requests
• example prediction object passed to the itemComponent

{
  description: "Poetic Systems, Bering Drive, Houston, TX, United States",
  id: "a578b600406c5b3e6db4350ef6d64018f1a8f02c",
  matched_substrings: [
    {
      length: 14,
      offset: 0
    }
  ],
  place_id: "ChIJGQ1R6v3DQIYR7AQTfQRxGbc",
  reference: "ClRHAAAABUZAZiM67fZ7sXVkMxAQ64HDkSbh2yrmT7lhcuZha4-5jSzXMxcxRgFgY5YaxJ52klhiVtvfOlIKpx4-ahObAogee7i0FaIh5yuZacmdEMgSENyJkU4LIjtmpDT_YO7L2EIaFPIIiyDwg11ttyCaatPWtd5FCKKf",
  terms: [
    {
      offset: 0,
      value: "Poetic Systems"
    },
    {
      offset: 16,
      value: "Bering Drive"
    },
    {
      offset: 30,
      value: "Houston"
    },
    {
      offset: 39,
      value: "TX"
    },
    {
      offset: 43,
      value: "United States"
    }
  ],
  types: [
    "establishment"
  ]
}