[HTML5] APIs – Geolocation

Geolocation API is a specification by World Wide Web Consortium (W3C) to define an interface to retrieve the geographical location information for a client-side device. All major browsers support Geolocation APIs and you can access them through JavaScript code.

1. Geolocation Interfaces

Geolocation API defines the following interfaces:

  • NavigatorGeolocation
  • Geolocation
  • Position
  • Coordinates
  • PositionCallback
  • PositionErrorCallback
  • PositionOptions
  • PositionError
interface NavigatorGeolocation {
  readonly attribute Geolocation geolocation;
};
interface Geolocation {
  void getCurrentPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options);
  long watchPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options);
  void clearWatch(in long watchId);
};
interface PositionCallback {
  void handleEvent(in Position position);
};
interface PositionErrorCallback {
  void handleEvent(in PositionError error);
};
interface PositionOptions {
  attribute boolean enableHighAccuracy;
  attribute long timeout;
  attribute long maximumAge;
};
interface Position {
  readonly attribute Coordinates coords;
  readonly attribute DOMTimeStamp timestamp;
};
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;
};
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;
};

 

2. Navigator

Objects implementing the “Navigator” interface must also implement the “NavigatorGeolocation” interface.

Navigator implements NavigatorGeolocation;

In major browsers, you can get a “Navigator” object through the “window.navigator” property.

So you can access the “Geolocation” object like this:

if (navigator.geolocation) {  // you can omit the "window"
  // you have a "Geolocation" object
} else {
  alert("Your browser does not support geolocation");
}

 

3. Getting the Current Position

To get the current location, you need to call the “getCurrentPosition()” method of a “Geolocation” object. As a minimum, you can pass the success callback function, whose single parameter is a “Position” object. In the callback function, you can get the “Coordinates” object through the “coords” property of the “position” object .

You can also provide the error handler function as a second argument . You can look up the “code” property of the “PositionError” object  to find out why it didn’t work.

  • 0 : Unknown error
  • 1 : Permission denied by user (PERMISSION_DENIED)
  • 2 : Position is not available (POSITION_UNAVAILABLE)
  • 3 : Request timed out (TIMEOUT)
<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation API</title>
    <script src="../../Scripts/jquery.js"></script>
    <script>
    function displayLocation(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      $('#location').text("You are at Latitude: " + latitude + ", Longitude: " + longitude);
    }
    function handleError(positionError) {
      $('#location').text("code:" + positionError.code + ", " + positionError.message);
    }
    $(document).ready(function () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation, handleError);
      }
    });
    </script>
  </head>
  <body>
    <section id="location">
    Your location!!!
    </section>
  </body>
</html>

When you  view this page, a browser may request for permission to retreive your location data.

 

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s