HTML5 - Geolocation

What is HTML5 Geolocation API

The HTML5 Geolocation API allows you to give out or share your current location with web sites that have it enabled. A javascript method can get your latitude and longitude and then send it to the backend server and also tailor your experience according to your location like finding local businesses or show your current location on a map.

Currently, most web browsers and mobile devices have support for the Geolocation API. The geolocation APIs collaborate with a new property of the global navigator object i.e. Geolocation object can be initiated like below:

var geolocation = navigator.geolocation;

A geolocation object is a service javascript object that lets widgets grab information about the geographic location of a device.

Geolocation Methods

The geolocation object provides the following methods:

The geolocation javascript object offers the following in-built methods:

Example

The code below is an example of how to use any of the above methods:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

In the code above, the showLocation and errorHandler are callback methods that would be used to grab the actual position of the user and also to handle any errors if they occur.

Location Properties

The Geolocation API methods getCurrentPosition() and getPositionUsingMethodName() describe the callback method that would grab information about the location of the user. These particular methods are written asynchronously with a Javascript object Position that handles storing the complete information about the location of the user.

The Position Javascript object handles the specification of the current geographic location of the user device. The location is specified as a set of geographic coordinates alongside information about heading and speed.

The table below specifies the properties available for the Position object. For optional properties, if the system cannot return a value, the value of that particular property is set to null.

Example

The code below shows how to make use of the Position object. Here, the showLocation method is actually a callback method:

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

Handling Errors

Geolocation is actually really complicated and it is required to catch any error that occurs and also handle it gracefully.

The geolocation methods getCurrentPosition() and watchPosition() uses a error handler callback method which generates the PositionError object. This object has only two properties, namely:

The table below describes the error codes that might be returned in the PositionError object.

Example

The code below shows how to make use of the PositionErro object. Here, the errorHandler method is actually a callback method:

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

Position Options

The code below is the actual syntax for using the getCurrentPosition() method:

getCurrentPosition(callback, ErrorCallback, options)

Here the third parameter is the PositionOptions javascript object that contains a set of options for grabbing the geographic location of the user's device.

The options below can be specified as the third parameter:

Example

The code below is a sample code which shows how to use the methods mentioned above:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});