HTML 5: Geolocation

In my recent posts, I explained Audio Tag and Video Tag In HTML5 and how to use them and what are their different features. In this post I will explain another important API of HTML5: Geolocation API. Before HTML5, there was no provision of finding User’s location. But now using Geolocation API, we can easily locate user’s geographical position. But some user’s may not want to share their position co-ordinates so Geolocation only works if user approves it. Geolocation is supported by Internet Explorer 9, Firefox, Chrome, Safari and Opera. Today many devices which have GPS facility are using Geolocation like iPhone, etc.

GeoLocation

 

 

getCurrentPosition() method: This method is used to find user’s current position. The below example explains its functionality :

<!DOCTYPE html>

<html>
<body>
<p id=”sample”>Users co-ordinates are:</p>
<button onclick=”getLocation()”>Get Location</button>
<script>
var z=document.getElementById(“sample”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{z.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
z.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>
</body>
</html>

 
The above example first check if Geolocation is supported. In case it is supported it execute the getCurrentPosition() method else display a message to the user. If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition ) which further displays the Latitude and Longitude to the user. One very important concept in Geolocation is error handling. To avoid complexity in beginning, I have avoided its use in above example. In getCurrentPosition() method second parameter is used to handle errors. It specifies a function to run if it fails to get the user’s location in any case. All you have to do is to pass showError in the parameter list of getCurrentPosition() method i.e getCurrentPosition(showPosition,showError) and implement showError method as follows :

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

You can also display user’s co-ordinates in a map. You need to access any map service for this purpose like Google maps and provide it with user geographical co-ordinates. The implementation of showPosition() method changes to following :

function showPosition(position)
{
var xyz=position.coords.latitude+”,”+position.coords.longitude;var image_url=”http://maps.googleapis.com/maps/api/staticmap?center=”
+latlon+”&zoom=14&size=400×300&sensor=false”;document.getElementById(“mapholder”).innerHTML=”<img src='”+image_url+”‘>”;
}

In this way you can use Geolocation API. Many more methods comes with it like watchPosition() which returns the current position of the user and continues to return updated position as the user moves, clearWatch() which stops the watchPosition() method, etc.

About Sudhanshu Singh

Sudhanshu Singh is working in a Multinational Firm and has his expertise in .Net.

One Response to HTML 5: Geolocation

  1. rahul chaudhary December 23, 2012 at 11:26 pm #

    good work by sudhanshu singh…….

Leave a Reply