Hands on: Geolocation using HTML5

Learn how to use HTML5 to plot points on a map and determine current position

1 2 3 4 5 6 7 8 9 Page 4
Page 4 of 9

A First Experiment: Geolocation in the Browser

To test your browser's geolocation function, you just need the JavaScript code below:

Function for outputting position with navigator.geolocation

function $(id) { return document.getElementById(id); } <br> window.onload = function() { <br>   if (navigator.geolocation) { <br>     navigator.geolocation.getCurrentPosition( <br>         function(pos) { <br>           $("lat").innerHTML = pos.coords.latitude; <br>           $("lon").innerHTML = pos.coords.longitude; <br>           $("alt").innerHTML = pos.coords.altitude; <br>         }, <br>         function() {}, <br>         {enableHighAccuracy:true, maximumAge:600000} <br>     ); <br>   } else { <br>     $("status").innerHTML = <br>       'No Geolocation support for your Browser'; <br>   } <br>  }

The first line of the listing defines an auxiliary function $ , allowing for an abbreviated notation of the function document.getElementById() (similar to an alias). This trick was taken from the familiar jQuery library and is very convenient for our example, because the elements that need to be filled are marked with an ID attribute on the website. As in the previous examples, window.onload ensures that the content of the website is fully loaded before references to HTML elements are set. The first if query checks if the browser supports the Geolocation API. If that is not the case, an appropriate message is written into the element with the ID status. Otherwise, the actual function for determining position is activated: navigator.geolocation.getCurrentPosition().

According to the specification, the browser has to ask when calling this function if you want it to locate your current position and share it on the website.

Mozilla Firefox asks for permission to share your location
Mozilla Firefox asks for permission to share your location

Three arguments are passed to the function call:

  • A function to be executed after the position has successfully been determined (success callback)
  • A function that can react to errors if the position could not be determined (error callback)
  • Value pairs influencing how the position is determined

According to the specification, the two latter arguments are optional; the success callback always has to be specified. So as not to impede the JavaScript sequence, getCurrentPosition() has to be executed asynchronously in the background, and the relevant callback function can only be called once the position is known or an error has occurred.

In this very short example, both callback functions are implemented as anonymous functions; errors are not considered. The value pair enableHighAccuracy: true tells the browser to calculate the position as accurately as possible. On an Android cell phone, this setting causes activation of the internal GPS sensor. Finally, maximumAge specifies the time in milliseconds during which an already determined position can be reused. After that time, the position has to be redetermined -- in our case, every ten minutes.

1 2 3 4 5 6 7 8 9 Page 4
Page 4 of 9
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon