React-google-geocoder NPM

react-google-geocoder

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

About

react-google-geocoder gives you a text input that allows input validation and geo-location of an address via the Google Geo Location API.

If there are multiple results returned, they are displayed as a list and one can be selected. Once a unique address is located, the component will call a callback with all of the available address information.

See the demo https://mikebski.github.io/react-google-geocoder-demo/

Installation

Install using NPM:

npm install react-google-geocoder --save

You need to get a Google API credential that has GeoCoding enabled. See https://developers.google.com/maps/documentation/geocoding/get-api-key for information on how to get a key.

Note on Credential

For local development with an npm server, for some reason this setup requires a "server" key instead of a credential that is restricted by referrer. If you get errors about needing server credentials without referrer restrictions, generate a new server credential.

Usage

Minimal usage is something like this:

<GeoCoder apiKey="REPLACE_WITY_YOUR_GOOGLE_API_KEY"/>

See the Options below for all available options

Options

Property	Type	Default Value	Description
apiKey	PropTypes.string.isRequired	None	Your Google API key
searchButtonLabel	PropTypes.string	`Search`	Label for "Search" button
resetButtonLabel	PropTypes.string	`Reset`	Label for "Reset" button
selectButtonLabel	PropTypes.string	`Select`	Label for "Select" button
acceptButtonLabel	PropTypes.string	`Accept`	Label for "Accept" button
searchButtonClass	PropTypes.string	`geo-code-button geo-code-search-button`	CSS class for "Search" button
resetButtonClass	PropTypes.string	`geo-code-button geo-code-reset-button`	CSS class for "Reset" button
selectButtonClass	PropTypes.string	`geo-code-button geo-code-select-button`	CSS class for "Select" button
acceptButtonClass	PropTypes.string	`geo-code-button geo-code-accept-button`	CSS class for "Accept" button
errorMessage	PropTypes.string	`There was an error`	Error message text
errorMessageClass	PropTypes.string	`geo-code-error`	CSS class for error message
formTitle	PropTypes.string	`Search for Address`	Title of form
showFormTitle	PropTypes.bool	`true`	Should show form title?
formClass	PropTypes.string	`geo-code-form`	CSS class for form
tableClass	PropTypes.string	`geo-code-table`	CSS class for address list table
fieldLabel	PropTypes.string	`Address`	Label for address field
inputLabelWrapperClass	PropTypes.string	`geo-code-input-and-label`	CSS class for input and label wrapper
formButtonWrapperClass	PropTypes.string	`geo-code-form-button-wrapper`	CSS class for wrapper for form buttons
inputClass	PropTypes.string	`geo-code-input`	CSS class for input
labelClass	PropTypes.string	`geo-code-label`	CSS class for label
onAddressAccept	PropTypes.func	`(value) => alert("Accepted: " + JSON.stringify(value))`	Method to call when "Accept" is clicked, this gets passed the address information
input	PropTypes.element	`GeoCoderInput`	Input to use for the form
searchButton	PropTypes.element	`GeoCoderSearchButton`	Search button to use for the form
input	PropTypes.element	`GeoCoderInput`	Input to use for the form, see the demo page for how to do this
searchButton	PropTypes.element	`GeoCoderSearchButton`	Button to use for search
resetButton	PropTypes.element	`GeoCoderResetButton`	Button to use for reset
acceptButton	PropTypes.element	`GeoCoderAcceptButton`	Button to use for accept
selectButton	PropTypes.element	`GeoCoderSelectButton`	Button to use for select