jQuery Geolocate

jQuery Geolocate is a jQuery plugin that uses HTML5 geolocation to find your latitude and longitude, geocodes the coordinates with Google’s Geocoding API, and parses the address for components of your choosing, optionally inserting the result into a DOM element.

Plugin requires a Google API key because HTML5 geolocation only returns latitude and longitude.

• Package distribution
• Code repository
• Online demo

Install

Assuming you have a package.json:

$ npm install jquery-geolocate --save

Usage

var jQuery = require('jquery');
require('jquery-geolocate');

(function($) {
    // See examples
})(jQuery);

Also see the source of this page for <script> tag examples.

Options

Default plugin options that you can override:

var defaults = {
    loading: 'Searching...',
    formatted_address: true,
    components: [],
    name: 'long_name',
    delimeter: ', ',
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
};

See Address Component Types in Google's documentation to know which components are available.

Examples

Default options (formatted address)

$('.button-1').on('click', function() {
    $('.input-1').geolocate();
});

Postal code

$('.button-2').on('click', function() {
    $('.input-2').geolocate({
        'components': ['postal_code']
    });
});

City, state, ZIP; short names; pipe delimeter

$('.button-3').on('click', function() {
    $('.input-3').geolocate({
        'components': [
            'locality',
            'administrative_area_level_1',
            'postal_code'
        ],
        'name': 'short_name',
        'delimeter': ' | '
    });
});

No jQuery selector

$('.button-4').on('click', function() {
    $.geolocate().done(function(result) {
        alert(result);
    });
});

Returns a jQuery Deferred Object, so you should use .done() to receive the asynchronous result.