material-ui-geosuggest

A basic material-ui textfield autosuggest for the Google Maps Places API.

Installation

The package can be installed by using npm:
npm install material-ui-geosuggest --save

Requirements

You need to include https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places script to your project at some point either by using:

1. <script> tag
2. External script loader like react-load-script

Ps: Google Map API key can be obtained by following the instructions on Maps Javascript API

Usage

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MuiGeoSuggest from 'material-ui-geosuggest';

class App extends Component {
  render() {
    return (
      <div className="App">
        <MuiThemeProvider>
          <MuiGeoSuggest options={{
              types: ['(cities)'],
              componentRestrictions: {country: "us"}
            }}
          />
        </MuiThemeProvider>
      </div>
    );
  }
}

export default App;

Properties

options(object AutocompleteOptions)

The property which will be passed to Autocomplete constructor as options. Detailed explanation of Autocomplete options can be found at Google-Map AutocompleteOptions

Methods

onPlaceChange(object PlaceResult)

The method will trigger when user selects a place from the suggestion list. It will return the PlaceResult object which is specified at Google-Map API References.

Styling

Styling of TextField can be done by just passing parameters according to Material-UI / TextField

License

MIT