react-google-geocoder

License

Copyright (c) 2014-2018 Mike Baranski http://www.mikeski.net

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

Help

Create an issue here for help