HTML5: geolocation

Tweet

With HTML5 is now possible to use the target browser in order to determine the location from which the user is accessing the web. It is not, as you may understand, a GPS location (unless the user is surfing from a GPS capable device), but it can be quite interesting in some cases where special services are supplied on a web page.

How can we develop a geolocation service on our web page?

Well, first of all try and see the final effect: go here and enjoy. After that, please get back on the web thought...

First of all let me say that all location services on the target browser must be granted by the user. As you may have noticed by visiting the above live example, the browser has asked you permission for the use of location services (unless you've granted permanent access to your location).

But how is it working?
Well, this time is not just a line of code. In fact, we need to use a little snippet. Everything's working around the geolocation API.
Let's see a complete example:

<button onclick="getLoc()">Where are you?</button>
<div id="errMsg"></div>
<div id="map"></div>
<script>
var x=document.getElementById("errMsg");
function getLoc()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPos,showErr);
    }
  else{x.innerHTML="Geolocation not supported by this browser.";}
  }
function showPos(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;
  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("map").innerHTML="<img src='"+img_url+"'>";
  }
function showErr(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information not available"
      break;
    case error.TIMEOUT:
      x.innerHTML="Request timeout"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Unknown error"
      break;
    }
  }
</script>

The script itself is quite easy to understand, but I will here explain some important things:
1) the two divs at the beginning of the above snippet are used to show possible error (errMsg) and the resulting map (map);
2) the getLoc() function is used to determine the geolocation;
3) the showPos() function is actually showing the map by inserting it in the div with id="map";
4) the showErr() function is replacing the innerHTML of the div with id="errMsg" with a possible error message (something went wrong).

If you spend a little time on studying the above script, everything will be quite clear.
What about compatibility? Well, all the latest version of all the available browser are supporting geolocation. Good news eh?

If you like, you can share your thoughts by using the comments section below. If you don't want... well.. don't.