Desktop Geolocation with HTML5

These days it seems like everyone is excited about Geolocation. With the influx of location-aware technology comes the need for, well, location awareness. An increasing number of internet-ready devices come equipped with GPS (smartphones, etc), but what about location awareness in a desktop browser? While some applications for location awareness are more conducive to mobile devices (I don't need to see an augmented reality of my living room wall), sometimes it would be useful for a desktop browser to detect that I am in my living room (and more importantly where my living room is located).

Enter HTML5 geolocation.

How it works

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

This function prompts the user for their current location. If they grant permission and the location is successfully obtained, the successCallback function is executed. If they do not grant permission or the location is not successfully obtained, the errorCallback function is executed.

successCallback(position)

If a user grants permission for us to have their current location, and the location is successfully obtained, the successCallback function is executed and a position variable is passed. The position object is as follows:

interface Position {
 readonly attribute Coordinates coords;
 readonly attribute DOMTimeStamp timestamp;
};

interface Coordinates {
 readonly attribute double latitude;
 readonly attribute double longitude;
 readonly attribute double? altitude;
 readonly attribute double accuracy;
 readonly attribute double? altitudeAccuracy;
 readonly attribute double? heading;
 readonly attribute double? speed;
};

errorCallback(error)

If a user does not grant permission for us to have their current location, or there is an error in obtaining the user's location, the errorCallback function is executed and an error variable is passed. The error object is as follows:

interface PositionError {
 const unsigned short PERMISSION_DENIED = 1;
 const unsigned short POSITION_UNAVAILABLE = 2;
 const unsigned short TIMEOUT = 3;
 readonly attribute unsigned short code;
 readonly attribute DOMString message;
};

Pulling it all together

function successCallback(position) {
 // get the coordinates from the position object
 var lat = position.coords.latitude;
 var lng = position.coords.longitude;

 // do something fun with the coordinates!
 // at this point you have the user's latitude
 // and longitude. you can use them to show
 // the user's position on a map using the google
 // maps api, or any number of other fun things.
}

function errorCallback(error) {
 switch(error.code) {
  case error.PERMISSION_DENIED:
   alert("You have chosen not to share your location");
   break;
  case error.POSITION_UNAVAILABLE:
   alert("This service is unavailable for your location");
   break;
  case error.TIMEOUT:
   alert("The request has timed out");
   break;
  }
 }
}

function getCurrentLocation() {
 // if the geolocation object is available
 if (navigator.geolocation) {
  // request location
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
 } else {
  // geolocation object is not available
  error('not available');
 }
}

And voila! Geolocation. The fun part, of course, is what you do with the coordinates once you have them, but I'll leave that up to you (for now).