:::: MENU ::::

Simple HTML5 geolocation plugin using jQuery

jQuery GeoLocation Plugin

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

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.

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

  • 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

  • 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

jquery.geolocation.js – javascript code

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

>.


So, what do you think ?

  •