material-ui-autocomplete-google-places
React component that uses Google Places API AutocompleteService, Google Maps Geocoder, and Material-UI AutoComplete to replicate Google Places Autocomplete search dropdown in Material-UI. Returns latitude and longitude from selected item.
Useful Links:
To get started:
Include script tag in html file:
Install package:
$ npm install material-ui-autocomplete-google-places
Basic Use Case:
; Component // Results from clicking on location { console; } { return <MuiThemeProvider muiTheme=> <GooglePlaceAutocomplete // Function to return lat and lng results=thisgetCoords /> </MuiThemeProvider> ; }Optional Parameters for Google Places AutocompletionRequest object:
<GooglePlaceAutocomplete // Function to return lat and lng results=thisgetCoords // AutocompletionRequest object specification componentRestrictions=country: 'au' types='establishment'/>Available properties for GooglePlaceAutocomplete:
- anchorOrigin
- animated - default: true
- animation
- errorStyle
- errorText
- floatingLabelText
- fullWidth - default: true
- hintText - default: ' '
- listStyle
- maxSearchResults
- menuCloseDelay
- menuStyle
- onClose
- open - default: false
- style
- targetOrigin
- textFieldStyle
Edit dropdown menu via:
- menuItemStyle
Defaults for menuItemStyle
style={this.props.menuItemStyle || {
fontSize: 13,
display: 'block',
paddingRight: 20,
overflow: 'hidden',
}
See repo for more details.
License
This package is licensed under the terms of MIT License. See the LICENSE file for further information.