Address Detection Widget v.1.0.4

See working DEMO

Retrieves user localization and tries to find his current address using google maps api. After that it automatically fill HTML form with collected values. Widget is using browser geolocalization functionality. The list of supported browsers are here.

Requirements

Address detection widget requires jquery library to work. Also its styling is based on Bootstrap so it requires the bootstrap styles included into document. There is no need to include bootstrap scripts whatsoever.

Installation

Download with bower
You can use bower to get latest version of Address Detection Widget. Just type in system terminal/console:

bower install address-detection-widget --save

To enable this widget on your website you have to include javascript documents in your document head section:

<!-- jQuery  -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!--  Google maps API -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Widget core scripts  -->
<script src="scripts/AddressDetectionWidget.min.js"></script>

Also there is need to include css styles sheets:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/AddressDetectionWidget.css">

AddressDetectionWidget.min.js and AddressDetectionWidget.min.css files you can find in /dist/scripts and /dist/styles folders.

Initialization

First and foremost you have to create widget placeholder

<div id="yourWidgetID" class="addressDetectionWidget"></div>

The width of the widget is always 100% so it fills its container. Height is fixed.

After that initialize plugin using code below. place it somewhere in your document (for example at the bottom, just before </body> tag).

// WIDGET INITIALIZATION
$('#yourWidgetID').AddressDetectionWidget({
    formId: '#testForm' // id of form you want to fill with collected values
});

Notice that as an option you have to pass formId with the ID of form which plugin is going to manage. This is mandatory.

Options

You can change widget settings by passing them as an JavaScript Object during initialization. Below is the list of options with their default values.

defaultOptions = {
  formId: '',
  addressId: '#street',
  cityId: '#city',
  postalId: '#zip',
  postalFirstId: '#zip-first',
  postalSecondId: '#zip-second',
  countryId: '#country',
  texts: {
    cancelBtn: 'cancel',
    tryAgainBtn: 'Try again',
    start: {
      title: 'Location Detection',
      content: 'We can detect your address to simplify form filling. Just press the button below.',
      detectBtn: 'Detect location'
    },
    success: {
      title: 'Is this your address?',
      content: 'We think that this is your adress. If it is correct click "Fill form" button below.',
      fillBtn: 'Fill form'
    },
    error: {
      title: 'Ups...',
      geocoderFailed: 'We cannot retrieve your location information right now :(',
      unsupportedBrowser: 'Geolocation is not supported by this browser. Please try to use latest IE, Chrome, Firefox, Opera or Safari browser.'
    },
    loading: {
      title: 'Please wait...',
      content: 'We are detecting your current location'
    }
  }
};

And here is example how to change default ID of post-code input and success message title diuring plugin initialization. Remember to add # sign before input ID.

// WIDGET INITIALIZATION
$('#yourWidgetID').AddressDetectionWidget({
    formId: '#testForm',
    postalId: '#post_code',
    texts: {
      success: {
        title: 'Success!'
      }
    }
});

License

Address Detection Widget is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License and also available under the MIT License.