react-google-geocoder

Google GeoCoding Input

Usage no npm install needed!

<script type="module">
  import reactGoogleGeocoder from 'https://cdn.skypack.dev/react-google-geocoder';
</script>

README

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