a blog for those who code

Sunday 7 August 2016

How to determine GeoLocation in HTML5

In this post we will be discussing about determining location in HTML5 with a simple getCurrentPosition. The getCurrentPosition method will pass a success callback function to determine the location and we will display the properties of the position object returned. The changes done to the elements in HTML5 goes towards a greater simplicity.



According to CanIUse, it has support in almost all of the browsers


At first we will create a blank HTML file. Next step is to check that geolocation is supported or not in the browser, if it is not supported we will display a message as shown below

if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  // Message 'Geolocation not supported';
}

ALSO READ : Useful but less known HTML Tags

getCurrentPosition takes three parameters successCallback (the function to execute and pass the coordinates), errorCallback (handles error if any) and options (options to retrieve position). successCallback is mandatory whereas errorCallback and options are optional. One more thing to note that call to getCurrentPosition is asynchronous thus this method needs to be told which callback to execute on success or on error. Our succesCallback code is as shown below

function success(position) {
  var locDiv = document.getElementById('loc');
  locDiv.innerHTML = 'Lat : ' + position.coords.latitude + 
    'Long : ' + position.coords.longitude + 
    'Accuracy : ' + position.coords.accuracy;
}

The position objects have two objects coordinates and timestamp. The coordinates have property like latitude, longitude, accuracy altitude (if available), heading (if available) and speed (if available).

PC : https://developer.mozilla.org/en-US/docs/Web/API/Coordinates

ALSO READ : HTML5 Responsive Frameworks for Web Developers

When the getCurrentLocation method is called, the very first action that the browser performs is to verify that the user has authorized the browser to provide the information to the page and prompt the user to do so. If you unauthorized it you will get to see the below blocked message in chrome.


You can alternatively set whether you want to allow sites to track your location or not from the setting in the browser.


Full Code :

<!DOCTYPE html>
<html>
<head>
<title>My Location</title>
<script>
function success(position) {
  var locDiv = document.getElementById('loc');
  locDiv.innerHTML = 'Latitude : ' + position.coords.latitude + '<br />' +
        'Long : ' + position.coords.longitude + '<br />' +
        'Accuracy : ' + position.coords.accuracy;
}

if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  loc.innerHTML = 'Geolocation not supported';
}
</script>
</head>
<body>
  <div id="loc"></div>
</body>
</html>

Which will give us the below result :

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment