HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Geolocation API

The Geolocation API allows the user to provide their location to web applications if they so desire.

For privacy reasons, the user is asked for permission to report location information.

It is mainly used for local businesses, restaurants or showing location on the map.

It uses JavaScript to give the latitude and longitude to the backend server.

Note: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The Geolocation object

The Geolocation API uses global navigator object which can be created as follows:

var loc = navigator.geolocation;

To obtain the user's current location, you can call the getCurrentPosition() method.

This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information.

When the position is determined, the defined callback function is executed.

You can optionally provide a second callback function to be executed if an error occurs.

Displaying Location using HTML Geolocation

The following code displaying the current location with the help of latitude and longitude via HTML Geolocation.

Run code

Error and Rejection Handling

It is very important to handle the errors generated in Geolocation and show a required message when an error occurs.

Methods like getCurrentPosition() make use of an error handler to handle the error generated.

The PositionError object used by error handler has two properties which let the function handle error efficiently:

  • Code
  • Message

Generated errors in geolocation:

Error Description
UNKNOWN_ERROR An unknown error
PERMISSION_DENIED The application doesn’t have the permission to make use of location services
POSITION_UNAVAILABLE The location of the device is uncertain
TIMEOUT Time to fetch location information exceeded the maximum timeout interval
Run code

Displaying result in Map

Displaying location in a map is a very interesting task. This services used to provide the exact location in map.

To display the result in a map, you need access to a map service, like Google Maps.

The functionality of the map is provided by a JavaScript library located at Google:

In the example below, the returned latitude and longitude are used to show the location in a Google Map:

Run code

Location Properties

The following table determines properties used in getCurrentPosition() and their returning values:

Property Description
coords.latitude Always returns latitude as a decimal number
coords.longitude Always returns longitude as a decimal number
coords.accuracy Always returns accuracy of position
coords.altitude Returns the altitude in meters above sea level if available
coords.altitudeAccuracy Returns altitude accuracy of position if available
coords.heading Returns heading in degree clockwise from North if available
coords.speed Returns speed in mps if available
timestamp Returns date or time of response if available

Geolocation Methods

The Geolocation has following methods which make it interesting and easier to work:

Method Description
getCurrentPosition() Fetches the current location of the user
watchPosition() Fetches periodic updates of user’s current location
clearWatch() Cancels a watchPosition call currently in execution