Geolocation in HTML5


Geolocation is a technology to retrieve current geographical location of a user.


So consider an example that you are visiting a city for the first time and looking for sight-seeing locations close to your hotel. However, you do not know where to go and which places to look for. Therefore, it will be helpful if you have some application that can help you locate such places and provide feedback for the same. In that case you as a user will have to allow the application to detect your location and provide you that feedback.

An application like map can also use Geolocation to give you direction to a target location.


The HTML5 Geolocation API uses certain features, such as Global Positioning System (GPS), Internet Protocol (IP) address of a device, nearest mobile phone towers, and input from a user, in the users’ device to retrieve the users’ location. The users’ location retrieved by using the Geolocation API is almost accurate depending upon the type of source used to retrieve the location.

There is a really good demo of HTML5 Geolocation here (

The Geolocation API provides the following methods:

1. getCurrentPosition(successCallback, errorCallback, options)

Used to retrieve the current geographical location of a user.

as the name suggests is a callback function when the geolocation is successful at locating the current position of a user. It takes position object as an argument. This position object specifies the current geographic location of a user as a set of geographic coordinates. Here is the list of properties available

  • coords.latitude
  • coords.longitude
  • coords.accuracy
  • coords.altitude
  • coords.altitudeAccuracy
  • coords.heading
  • coords.speed
  • timestamp

is a callback function to handle errors that may occur while retrieving the location of a user. The third parameter,

specifies a set of options, such as timeout for retrieving the location information. Both of these are optional parameters.

2. watchPosition(successCallback, errorCallback, options)

The function returns a watchId and calls successCallback with the updated coordinates. It continues to return updated position as the user moves (like the GPS in a car).

3. clearWatch(watchId)

Stops the watchPosition() method based on the watchId provided.

Before retrieving the users’ location by invoking getCurrentPosition() we can also check whether the browser supports the geolocation feature.

Listing 1: Consider the following code snippet to check whether the browser supports the geolocation feature:

Listing 2: Consider the following code snippet for retrieving the users’ location by using the getCurrentPosition() method:

At times, the user may not provide the permission to access his location. Or the error may also occur when a user checks the current location on a mobile device and the device goes out of coverage area or the network connection is timed out. We can handle different types of errors by using some pre-defined error codes.


Listing 3: So we can now can improvise on our errorHandler callback function to give more appropriate message:

Ok! That should be good enough to make use of Geolocation in an application now.

P.S. Just don’t use javascript alert in your real app, that was just to demo the function.

  • Suseela Susiee

    Great and useful article. Creating content regularly is very tough. Your points are motivated me to move on.

    SEO Company in Chennai