HTML5 Geolocation

HTML5 geolocation helps to identify the user current position.

Check for HTML5 Geolocation browser compatibility

It is used to check whether the browser supports the Geolocation Api or not.

if(navigator.geolocation) {
 // Code to get current position
} else {
 alert('Geolocation Api is not supported on this browser');
}

Get user's current position

Geolocation API has navigator.geolocation object and getCurrentPosition() method to get the user's current position. getCurrentPosition() method accepts three parameters - success callback function, error callback function and position options.

Success callback function

Success function is invoked only when user allowed to share their current location and browser successfully fetched their location. On success, the location data are accessed by coords object. coords object has following properties -

Property	Description
coords.latitude	returns latitude in a decimal number
coords.longitude	returns longitude in a decimal number
coords.accuracy	returns the accurate value of latitude and longitude in meters
coords.altitude	returns height of the location above the sea level in meters
coords.altitudeAccuracy	returns the altitude accuracy of position in meters
coords.heading	returns the current direction of device from north in degree clockwise
coords.speed	returns relative speed in meters per second

Example

function visitorLocation(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.write('Latitude: '+lat+' and Longitude: '+long);
}

Error callback function

This is optional callback function and used to handle error.

Example

function getError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
	document.write("User denied the request for Geolocation.");
	break;
case error.POSITION_UNAVAILABLE:
	document.write("Location information is unavailable.");
	break;
case error.TIMEOUT:
	document.write("The request to get user location timed out.");
	break;
case error.UNKNOWN_ERROR:
	document.write("An unknown error occurred.");
	break;
}
}

Position Options

There is a set of position options available to retrieve the geographic location service.

Example

Property	Description
enableHighAccuracy	It returns a boolean value, either true or false. It tries to return the most accurate position of the user if sets to true otherwise returns less accurate position.
timeout	The time taken in milliseconds to respond with location data.
maximumAge	The expiry time of cache location information in milliseconds.

Geolocation Example

Here, we have merged the all three callback functions or the complete geolocation code is as follows -

if(navigator.geolocation) {
var posOptions = { enableHighAccuracy : true, timeout : Infinity, maximumAge : 65000 };
navigator.geolocation.getCurrentPosition(visitorLocation, getError, posOptions);
} else {
alert('Geolocation Api is not supported on this browser');
}

function visitorLocation(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.write('Latitude: '+lat+' and Longitude: '+long);
}

function getError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
	document.write("User denied the request for Geolocation.");
	break;
case error.POSITION_UNAVAILABLE:
	document.write("Location information is unavailable.");
	break;
case error.TIMEOUT:
	document.write("The request to get user location timed out.");
	break;
case error.UNKNOWN_ERROR:
	document.write("An unknown error occurred.");
	break;
}
}