jQuery GeoLocation Plugin

Ideally I’d like to handle HTML5 geolocation function graceful way using jQuery.

 $.geolocation(function (lat, lng) {
     // handle success					
 }, function (error) {
     // handle failure
 });

Above jQuery plugn function takes two arguments,

1. geolocation success function – executes if user share location
2. geolocation fail function – executes if user doesn’t share location

HTML5 GeoLocation API Basics

HTML5 allows user to share his location with website they browse. In geolocation app, that provides information relative to user’s current location, these feature is really useful.

How to know if browser supports geolocation or not?

Javascript browser object navigator has attribute called “geolocation” that appear within browsers that supports HTML5 geolocation.

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(getPosition,errors);         
} else {				
	// browser doesn't supports geolocation
}

Explanation:-

• navigator.geolocation.getCurrentPosition function will ask user for permission to reveal his latitude and longitude to function.
• If user permits browser to share his location with code , the callback getPosition will be called.
• If user denies to share location than errors function will be called.
• In case user is driving and communicating with website you might use navigator.geolocation.watchPosition(getPosition) instead navigator.geolocation.getCurrentPosition(getPosition)

Getting User Lat-Long coordinates in getPosition function

function getPosition(position) {
    user_lat  = position.coords.latitude;
    user_long = position.coords.longitude;	
}

• Above function will be executed with arguments are set to position object.
• position object does contain – coords property which further contains accuracy, altitude, altitudeAccuracy, heading, latitude, longitude, speed subproperties.
• So, we need to read latitude and longitude from above subproperties.
• i.e. position.coords.latitude; and position.coords.longitude;

Handling Errors

function errors(error_code) {
		switch(error.code) {
			case error.PERMISSION_DENIED:
				FAIL("PERMISSION_DENIED");
			 break;

			case error.POSITION_UNAVAILABLE:
				FAIL("POSITION_UNAVAILABLE");
			  break;

			case error.TIMEOUT:
				FAIL("TIMEOUT");
			  break;

			case error.UNKNOWN_ERROR:
				FAIL("UNKNOWN_ERROR");
			  break;
		}
		return;
	}

• On error, error callback will be called.
• error object will be passed as argument to this function which contains code as error property. (i.e. error.code)
• From these error properties, we can determine exact errors and make appropriate code flow.

jQuery geoLocation plugin setup that uses Google MAP api

$(document).ready(function () {

    $('#showLocationBtn').on('click', function () {

        $.geolocation(function (lat, lng) {
            var myLatlng = new google.maps.LatLng(lat, lng);
            var mapOptions = {
                center: new google.maps.LatLng(lat, lng),
                zoom: 8
            };
            var map = new google.maps.Map(document.getElementById("maparea"), mapOptions);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: "Your Location"
            });
        });
    }, function (error_codes) {
        switch (error_codes) {
        case "NOT_SUPPORTED":
            alert('Browser doesnt supports geoLocation');
            break;
        case "PERMISSION_DENIED":
            alert('User Denied to share his geoLocation');
            break;
        case "POSITION_UNAVAILABLE":
            alert('geoLocation info not available');
            break;
        case "TIMEOUT":
            alert('geoLocation lookup timeout');
            break;
        case "UNKNOWN_ERROR":
            alert('unknown error');
            break;
        default:
            break;
        }
    });
});

jquery.geolocation.js – javascript code

// jquery.geolocation.js
;
(function ($, window, document, undefined) {
    $.geolocation = function (success_func, fail_func) {

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getPosition, errors);
        } else {
            // browser doesn't supports geolocation
            // so exit now.
            FAIL("NOT_SUPPORTED");
            return;
        }

        function getPosition(position) {
            user_lat = position.coords.latitude;
            user_long = position.coords.longitude;
            SUCCESS(user_lat, user_long);
            return;
        }

        function errors(error_code) {
            switch (error.code) {
            case error.PERMISSION_DENIED:
                FAIL("PERMISSION_DENIED");
                break;

            case error.POSITION_UNAVAILABLE:
                FAIL("POSITION_UNAVAILABLE");
                break;

            case error.TIMEOUT:
                FAIL("TIMEOUT");
                break;

            case error.UNKNOWN_ERROR:
                FAIL("UNKNOWN_ERROR");
                break;
            }
            return;
        }

        function SUCCESS(user_lat, user_long) {
            if (typeof (success_func) != "undefined") {
                success_func(user_lat, user_long);
            } else {
                alert("Latitude = " + user_lat + " and Longitude = " + user_long);
            }
        }

        function FAIL(error) {
            if (typeof (fail_func) != "undefined") {
                fail_func(error);
            } else {
                alert(error);
            }
        }

    }
})(jQuery, window, document);

 Demo – Using this plugin with google map api (click button below)

>.