Wrapper on top of the material-ui AutoComplete component that use google place api
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
- AutoComplete that auto-load google places
<GooglePlaceAutocomplete
searchText={'paris'}
onChange={onAutoCompleteInputChangeFct}
onNewRequest={onClickLocationFct}
name={'location'}
/>-
onNewRequest: function -> (selectedData, searchedText, selectedDataIndex)
-
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., defaultundefined -
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
npm run build- produces production versionnpm run dev- produces development versionnpm test- run the tests
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent