material-ui-places component for ReactJS

Wrapper on top of the material-ui AutoComplete component that use google place api

Installation

Add this script to your html page:

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

Material-ui is required:

  npm install material-ui

  npm install material-ui-places

<GooglePlaceAutocomplete
  searchText={'paris'}
  onChange={onAutoCompleteInputChangeFct}
  onNewRequest={onClickLocationFct}
  name={'location'}
/>

Same as AutoComplete material-ui component
onNewRequest: function -> (selectedData, searchedText, selectedDataIndex)
onChange: function -> ({target: {value: searchText}}, dataSource, params)
location: {lat: latitude, lng: longitude}, default: {lat: 0, lng: 0} see LatLng
radius: number, default: 0
bounds: object, {sw: southWest, ne: northEast} for LatLngBounds or {south: south, east: east, north: north, west: west} for LatLngBoundsLiteral default: undefined
getRef: function -> (ref)
types: Array, The types of predictions to be returned. Four types are supported: 'establishment' for businesses, 'geocode' for addresses, '(regions)' for administrative regions and '(cities)' for localities. If nothing is specified, all types are returned., default undefined
restrictions: country: Array|String, { country: [ 'fr', 'gb'] | 'gb' } Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). E.g., us, br, au. You can provide a single one, or an array of up to 5 country code strings. See ComponentRestrictions