antd-geosuggest
v0.3.3
Published
Antd based geo suggestion for Google maps places API
Downloads
188
Readme
antd-geosuggest 
Antd based geo suggestion for Google maps places API
Installation
Credits: This library and APIs are inspired by react-geosuggest
$ npm install --save antd-geosuggestPrerequisite
As 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.
Usage
import GeoSuggest from 'atnd-geosuggest';
// Single selection
<GeoSuggest onChange={(result) => this.updateData(result)}/>
// Multiple selection
<GeoSuggest multiple onChange={(result) => this.updateData(result)}/>
Properties
placeholder
Type: String
Default: Search places
The input field will get this placeholder text.
defaultValue
Type: Array<{key: string, label: string}>
Default: undefined
The default value of the input.
location
Type: google.maps.LatLng
Default: null
To get localized suggestions, define a location to bias the suggests.
radius
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.
bounds
Type: LatLngBounds
Default: null
The bounds to use for biasing the suggests. If this is set, location and radius are ignored.
types
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.
minLength
Type: Number
Default: 1
Sets a minimum length of characters before a request will be sent to find suggestions.
onChange
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.
Start example server
npm startgenerate demo
npm run gh-pagesLicense
MIT © chilijung