Jon
Rohan

More and more devices today are connected, to the web and to your location. Some of the most recent browsers and OS’s have location built in, (eg. mobile safari, snow leopard, FF 3.5, …).

The API doesn’t care what is updating the location, it just grabs the location from the navigator.geolocation object. Here’s a closer look at the interface.

Geolocation interface

interface Geolocation { 
    void getCurrentPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);

    long watchPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);

    void clearWatch(in int watchId);
  };

  [Callback=FunctionOnly, NoInterfaceObject]
  interface PositionCallback {
    void handleEvent(in Position position);
  };

  [Callback=FunctionOnly, NoInterfaceObject]
  interface PositionErrorCallback {
    void handleEvent(in PositionError error);
  };

getCurrentPosition() – takes three arguments. The first (required) is the successCallback function which you define to handle the asynchronous call. The second (optional) is the errorCallback function, for when you can’t be found. The last is PositionOptions object which you can specify Boolean enableHighAccuracy, long timeout and long maximumAge. The function will get the position and pass it to the successCallback function as a position object.

watchPosition() – takes the same three arguments as getCurrentPosition. And on the surface it does the same thing as it, with one big exception. watchPosition will call the successCallback every time the position changes. So if you wanted to create a mobile app that follows you walking down the street, this would be the function to use. When called the function returns a unique identifier, which you use to call the last function.

clearWatch() – takes one argument, the unique identifier from the watchPosition method. This method will clear the watch timer.

Demo

I wrote a small example that will get your lat, long and display it.

function getLocation() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
  } else {
    noLocation();
  }
}

function foundLocation(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  $("#current-location").replaceWith('<a id="current-location" href="http://maps.google.com/?q=' + lat + ',' + long + '" target="_blank">' + lat + ', ' + long + '</a>');
}

function noLocation() {
  $("#current-location").text('Could not find location');
}
$("#get-location").click(getLocation);

Disclaimer: I’ve tested this in Firefox 3.5 on my Mac, and my iPhone mobile Safari.

Coordinates: Check location by clicking the button.

Check My Location

Tags: geolocation, iphone, mobile web, safari 07 Sep 2009