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