Continuing on from my last post regarding new client-side storage options, I decided to keep the trend of HTML5-related posts coming 🙂

So unless you haven’t visited the web in the last 3 years, you know that location-based services are super-hot right now.  If social networking was the final result of Web 2.0, wiring-in people’s browsers (both position-locked and mobile) to geolocation is easily Web 3.0 and beyond.  For example, with few exceptions, the vast majority of my iPhone apps have some geo-location component.  Whether it’s my RedBox app finding me the closest kiosk, or FourSquare letting me “check in” to new (and not so new) locations, nearly everything I do on the web is able to be tagged with a location.  Every tweet, every Facebook wall post, heck, even this blog post have geolocation data attached to them.  In every possible way, the web is no longer just about “what” you are doing–it’s where you’re doing it as well.

To help make this more of an integrated reality, HTML5 will come fully-loaded with baked-in geolocation support.  As with client-side storage, dealing with the geolocation options is quite easy.

Let’s take a look at a simple example.  In what follows, I simply want to get a snap-shot of my current location and plop a marker of it on a Google map.  With HTML5, this is super easy.

First, we’ll be dealing with the Geolocation object.  This object is basically the wrapper for everything that we’ll be doing, so we’ll start by getting a reference to it:

var geo = navigator.geolocation;

Now there are several methods that are a part of the Geolocation object.  However, the one we’ll be looking at is getCurrentPosition().  As it’s name indicates, getCurrentPosition() is the gateway method for invoking geo-location services in HTML5.  This method takes up to 3 arguments:

  1. Success callback method
  2. Error handler method
  3. PositionOptions

The PositionOptions object, additionally, has 3 parameters that can be defined and passed in getCurrentPosition():

  1. enableHighAccuracy (specifies whether highest accuracy search should be used…can affect performance)
  2. timeout (how long the process should wait before invoking the PositionError object if Position cannot be retrieved)
  3. maximumAge (how old a cached Position object can be used before a new one must be requested)

Putting this all together, our invocation of getCurrentPosition() looks like this:

var get = navigator.geolocation;

Note: if you run the demo of this code, you’ll notice that you’ll be prompted to allow the browser to begin gathering location-based information about you.  This is part of the spec, and is intended to protect user’s privacy.  Given how click-happy most people are, I’m not sure it will accomplish much, but go figure 🙂

Now that we’ve invoked getCurrentPosition(), we’ll receive back a new Position object containing all the info we need about the location of the user.  Depending on the implementation, this will include a coords object that provides:

  1. longitude
  2. latitude
  3. altitude
  4. accuracy
  5. altitudeAccuracy
  6. heading
  7. speed

For our purposes, only 1, 2, and 4 are important.  One interesting thing to note, however is that “accuracy” provides information on how accurate, in meters, the geo-location was.  In my test, I got an accuracy range of 150 meters–pretty darn good!

With this information, we can now plot our marker on a map.  The rest of the code is really not HTML5 at all–it’s the Google Maps JavaScript API V3…but I thought I’d include it here to show how easy HTML5 and Google Maps make the process of this simple geolocation experiment:

function GeoSuccess(req) {
      var opts = {zoom: 5,mapTypeId:google.maps.MapTypeId.ROADMAP};
      var map = new google.maps.Map(document.getElementById("map_canvas"),opts);
      var loc = new google.maps.LatLng(req.coords.latitude,req.coords.longitude);
      var marker = new google.maps.Marker({position:loc,map:map,title:'Look, Ma, it\'s me!'});

Wrapping Up

As you’ve seen in this post, utilizing HTML5’s geolocation services is pretty simple.  There’s much more to it, of course, so be sure to check out the spec.

Also, be sure to check out the demo for this post.  And if you make something cool of your own, let me know about it!