HTML5 Geolocation - Building location-aware apps with HTML5

With HTML5's Geolocation APIs we can easily get the user's geolocation details. In this post, we learn about using these geolocation features by HTML5. But beware, this isn't really that accurate. HTML5 Geolocation can have kilometers of difference. Sometimes, it might even guess the wrong city. But most of the times, it's fairly correct and we can work with it.
But, if you notice, we really don't need that accuracy. We mostly use geolocation for determining the user's country for enhanced experience. So, let's get to it.

It's good to be location-aware...

Geolocation support

We need to test if the browser supports geolocation before we can do anything else. To do this, we can use the simple code below:

if (navigator.geolocation) {
    // Geolocation supported!
} else {
    // Oops... bad news...
}

Geolocation- The API

Now, let's learn to actually use Geolocation. navigator.geolocation has a function called getCurrentPosition. Now counter-intuitively, this function doesn't really return the coordinates of the user. It takes a function name as its argument and passes the location of the user on to that function. Why did the designers of geolocation make it that way? Seriously, I don't know... 

So, in summary, navigator.geolocation.getCurrentPosition takes in a function name and passes to it the position. Let's see the pseudo-code...

navigator.geolocation.getCurrentPosition(foo);
function foo(position){
    // Do something with the position
}

This function also takes in a second parameter which we'll talk about later.

Geolocation- Getting the coordinates

Now that the browser has returned the position to the foo function (we told it to return the position to the foo function with the getCurrentPosition function), its time to extract the coordinates from it. This is how we pull our the coordinates from the geolocation result:

function foo(position){
    position.coords.latitude;
    position.coords.longitude;
}

The position.coords object also has other important information like,

• position.coords.accuracy
• position.coords.altitude
• position.coords.altitudeAccuracy
• position.coords.heading (gives the heading direction so you can build a compass app)
• position.coords.speed

Geolocation errors and handling them

When you request the location of the person, the browser seeks the permission of the user before handing over the result to you. If the user denies you might get an error. There are many other errors that you can get too. Let's takle them. Remember, I mentioned that the getCurrentPosition also takes in a second argument? Well, this argument tells the function "which function should be called in case of faliure". I guess good code speaks louder than boring explanation, so here you go...

navigator.geolocation.getCurrentPosition(foo, bar);
// foo() if success
// bar() if failure
function foo(position){
    alert("Your coordinates are: "+position.coords.latitude+
          ","+position.coords.longitude);
}
function bar(error){
    switch(error.code) {
        case error.PERMISSION_DENIED:
            // The user denied to give you information
            // Do something
            break;
        case error.POSITION_UNAVAILABLE:
            // The position info isn't available
            // Do something
            break;
        case error.TIMEOUT:
            // The request was terminated as it took too much time
            // Do something
            break;
        case error.UNKNOWN_ERROR:
            // Dunno what happened
            // Do something
            break;
    }
}

Further work

Now, I would like to teach you to use this information to build a map and pinpoint the location of the user but I guess this was too hard to digest, so I'll leave it to the next post.

But what if you need to determine the location even in the old browsers like IE7? We can use something called geoPosition.js!