Few days back i shifted to Windows 7 from my old installation of windows XP, after that i was reinstalling all the application.So, i thought lets take firefox 3.5 for a spin, people are saying nice things about it and it has got new features like Private Browsing Mode, new TraceMonkey JavaScript engine, Support for native JSON, HTML5 <video> and <audio> elements, downloadable fonts,HTML5 offline data storage for applications and web worker threads. But main feature that i wanted to try was Location Aware Browsing.Although i knew about this feature set for quite a time now,but never installed latest version of firefox.Anyways, I tried and i must tell you its amazing, it got my geolocation with a very good accuracy.

Location based browsing opens up a whole new paradigm to web, its not just for mobile applications anymore.Having user’s geolocation means services can show them better content and provide much more localized service. Imagine going to burrp.com and rather than entering where you are it automatically recognizes your geolocation and suggests restaurants accordingly.

In this tutorial i will show you how to get user’s geolocation data using javascript. But, then you will say if this feature is supported in firefox only then what’s the use ? No, its not only supported on firefox, geolocation can be found out in other browsers too if Google Gears is installed on the system.Gears is available for Windows, Windows Mobile (IE Mobile,Opera Mobile), Mac (Firefox, Safari), Linux and Android. Ya ! one more thing, geolocation will work on firefox 3.0 also if Geode plugin is installed.If you like, you can read about the standard that has been written for geolocation before going forward. Enough said now, lets get our hand dirty now.

Lets first grab geolocation on firefox, we will work about google gears later.Straight from Mozilla documentation : The geolocation API is published through a geolocation child object within the navigator object. So, now we can test if our firefox supports geolocation or not. What are you saying ? “why not just check for version of firefox ?” No, thats a bad idea, versions can change and you should never rely of browser sniffing rather you should always do feature sniffing. Now, we can check if there is a support for geolocation using following code :

if (navigator.geolocation) {
   /* geolocation is available */
 else {
    alert("Geolocation services are not supported by your browser.");
}

Getting the Current position in Firefox

To get user’s current location, you can call getCurrentPosition() method.This method initiates a asynchronous call to detect user’s position.When position is determined it calls the callback that you have supplied according to the result.

navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

So now we use this information to write our code. here it is,..

function findUserLocation()
{
  navigator.geolocation.getCurrentPosition(foundUserLocation, noLocationFound);
}
function foundUserLocation(position)
{
  var lat = position.latitude;
  var long = position.longitude;
  alert('Found location: ' + lat + ', ' + long);
}
function noLocationFound()
{
  alert('Could not find location');
}
findUserLocation();

Using Google Gears to find User’s Geolocation

Now that that we have found user’s geolocation using firefox, lets use google gears now.Make sure you have installed Gears and have gears_init file.

<code><script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
function findUserLocation()
{
  var geo = google.gears.factory.create('beta.geolocation');
  geo.getCurrentPositionfoundUserLocation,noLocationFound);
}
function foundUserLocation(position)
{
  var lat = position.latitude;
  var long = position.longitude;
  alert('Found location: ' + lat + ', ' + long);
}
function noLocationFound()
{
  alert('Could not find location');
}
</script></code>

You see there isn’t much difference in finding out geolocation via both methods, If you are using google gears than just include gears_init file that contains function to enable you to communicate  with Gears on user’s machine.Now, we must first initialize gears and create a new variable that can be used to access gears functions.After that we just have to call getCurrentPosition on the variable that we have initialized earlier.Rest of the code remains same.

So, now i will combine these code into one and by using google maps api will show user’s current location on a map.

• See Demo

Hope you liked it. Leave comments on what you think about this and what sort of possibilities geolocation opens for you.

Related posts:

1. Chrome Extension to Fix Orkut Width Problem Google has introduced a basic extensions feature in its popular...