Antd based geo suggestion for Google maps places API
Credits: This library and APIs are inspired by react-geosuggest
$ npm install --save antd-geosuggestAs this component uses the Google Maps Places API to get suggests, you must include the Google Maps Places API in the <head> of your HTML:
<!DOCTYPE html>
<html>
<head>
…
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
</head>
<body>
…
</body>
</html>Visit the Google Developer Console to generate your API key. The API's that you have to enable in your Google API Manager Dashboard are Google Maps Geocoding API, Google Places API Web Service and Google Maps Javascript API.
import GeoSuggest from 'antd-geosuggest';
// Single selection
<GeoSuggest onChange={(result) => this.updateData(result)}/>
// Multiple selection
<GeoSuggest multiple onChange={(result) => this.updateData(result)}/>Type: String
Default: Search places
The input field will get this placeholder text.
Type: Array<{key: string, label: string}>
Default: undefined
The default value of the input.
Type: google.maps.LatLng
Default: null
To get localized suggestions, define a location to bias the suggests.
Type: Number
Default: 0
The radius in meters defines the area around the location to use for biasing the suggests. It must be accompanied by a location parameter.
Type: LatLngBounds
Default: null
The bounds to use for biasing the suggests. If this is set, location and radius are ignored.
Type: Array
Default: null
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. Consult the Google Docs for up to date types.
Type: Number
Default: 1
Sets a minimum length of characters before a request will be sent to find suggestions.
Type: Function
Default: function(suggest) {}
Gets triggered when a suggest got selected. Only parameter is an object with data of the selected suggest. This data is available:
placeId– TypeString– If it is a preset, equals thelabel. Else it is the Google MapsplaceIDlocation– TypeObject– The location containinglatandlnggmaps– TypeObject– Optional! The complete response when there was a Google Maps geocode necessary (e.g. no location provided for presets). Check the Google Maps Reference for more information on it’s structure.
npm start
npm run gh-pagesMIT © chilijung
