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:
Include script tag in html file:
<head>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>Install package:
$ npm install material-ui-autocomplete-google-places
Basic Use Case:
import GooglePlaceAutocomplete from 'material-ui-autocomplete-google-places';
class App extends React.Component {
// Results from clicking on location
getCoords(lat, lng){
console.log(lat, lng);
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<GooglePlaceAutocomplete
// Function to return lat and lng
results={this.getCoords}
/>
</MuiThemeProvider>
);
}
}<GooglePlaceAutocomplete
// Function to return lat and lng
results={this.getCoords}
// AutocompletionRequest object specification
componentRestrictions={{country: 'au'}}
types={['establishment']}
/>- 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.
This package is licensed under the terms of MIT License. See the LICENSE file for further information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent