Home > HTML 5, Programming > Geolocation and HTML5 on the iPhone

Geolocation and HTML5 on the iPhone

Why is it so hard to find a Starbucks around here?!!

This is a fairly specialized topic, but it’s also an easy one, so let’s devote a quick blog post to it for the sake of thoroughness.  Maybe it will help some of you HTML5 web searchers out there. (Welcome, web searchers!)

Some of you may be wondering if an HTML5 app running on the iPhone has access to the devices latitude and longitude, or “geolocation.”  It does!  One of the new HTML5 APIs is called the Geolocation API, and it gives your JavaScript access to the device’s geolocation information just as a native app has access to it.

Fun fact #1: when you fetch the iPhone’s geolocation info, the little compass icon in the status bar appears, just as it does for a native app, to remind the user that your application is tracking where they are.

Fun fact #2: when you attempt to access the device’s geolocation info, the user will get a popup asking if they want to grant permission to your app to…you know…track where they are.  They may say “no.” A good app will be prepared for rejection.

Fun fact #3: many modern desktop browsers also support the geolocation API!  In my experience, the values a desktop computer comes up with as its best guess for where you are is a joke though.

Get on with it

Final fun fact: You know how when you’re using Google Maps on your phone to drop a pin on the map showing where you are and that pin moves back and forth a few times before it finally settles down?  You’re going to get that, too.  When you begin querying the iPhone for its location, it will take a little while before the iPhone can come up with a final value for you, so be prepared for the location to change on you even if the user is sitting still.

So how do you fetch the location of the device, assuming your user allows you access to this private information?  The call is pretty straightforward:

navigator.geolocation.getCurrentPosition(function(position){
            var lat  = position.coords.latitude;
            var long = position.coords.longitude;
            .
            .
            .
        }, function(error){ // second handler is the error callback
            switch(error.code)
            {
            case error.TIMEOUT:
                break;
            case error.POSITION_UNAVAILABLE:
                break;
            case error.PERMISSION_DENIED:
                break;
            }
});

The coordinates that are returned are (on the iPhone at least) floating point numbers that go down many, many decimal places.  In practice, I’ve found those decimal places give you a pretty decent idea of what house you’re at, but not enough resolution to tell you what room of the house you’re in. What you do with that information is up to you!  There are several tools available to help you put a latitude/longitude value on a JavaScript map, for example, but that reaches into general JavaScript programming and beyond the scope of this blog, at least for now.

Or you could help poor Spirit find the nearest Starbuck’s. Goodness knows it has earned a latte.

Advertisements
  1. February 25, 2012 at 1:27 AM

    I’ll be honest. I came for the picture of Tim, but then I stayed for the info. I don’t currently code in HTML5 or JS, but hey, good to know anyway.

    • February 27, 2012 at 11:22 AM

      Ha ha! Even as a non-programmer, it might be handy to know what programmers can do with your iPhone, right? Welcome! We’ll see if Tim can’t swing back around every now and again.

      P.S. Your blog title has completely fired up my nostalgia for Amber now.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: