Online Certificate Courses HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials. 

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:

Sr.No. Method & Description
1

getCurrentPosition()

This geolocation API method gets the current geographic location of the user.

2 watchPosition()

This geolocation API method gets updates about the current geographic location of the device according to a particular period of time 

3 clearWatch()

This method cancels an ongoing watchPosition call.

This geolocation API method cancels a watchPosition method call that is currently ongoing.

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.

Property Type Description of
coords objects This handles specifying the geographic location of the device.
coords.latitude Number This handles specifying the latitude estimate in decimal degrees. The value range is [-90.00, +90.00].
coords.longitude Number This handles specifying the longitude estimate in decimal degrees. The value range is [-180.00, +180.00].
coords.altitude Number [Optional] This handles specifying the altitude estimate in meters above the WGS 84 ellipsoid.
coords.accuracy Number [Optional] This handles specifying the accuracy of the latitude and longitude estimates in meters.
coords.altitudeAccuracy Number [Optional] This handles specifying the accuracy of the altitude estimate in meters.
coords.speed Number [Optional] This handles specifying the device's current ground speed in meters per second.
timestamp date This handles specifying the time when the location information was retrieved and the Position object created.

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:

Property Type Description
code Number It contains a numeric code for the error.
message String It contains a human-readable description of the error.

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

Code Constant Description
0 UNKNOWN_ERROR The method failed to retrieve the location of the device due to an unknown error.
1 PERMISSION_DENIED The method failed to retrieve the location of the device because the application does not have permission to use the Location Service.
2 POSITION_UNAVAILABLE The location of the device could not be determined.
3 TIMEOUT The method was unable to retrieve the location information within the specified maximum timeout interval.

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:

Property Type Description
enableHighAccuracy Boolean This particular option specifies whether the widget wants to accept the most accurate location estimate possible. The value of this option is false by default.
timeout Number This property is the number of milliseconds your web application is willing to wait for a position.
maximumAge Number This particular option specifies the expiry time in milliseconds for cached location information.

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});

90% Scholarship Offer!!

The Scholarship offer is a discount program to take our Course Programs and Certification valued at $70 USD for a reduced fee of $7 USD. - Offer Closes Soon!!

Copyrights © 2021. SIIT - Scholars International Institute of Technology is a subsidiary of Scholars Global Tech. All Rights Reserved.