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.

$3

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:

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