Geolocation is one of the most exciting features offered by HTML5.
Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API.
As with all HTML5 functions, you cannot yet rely on browser support. Where browser support exists, it varies in depth and consistency. Essentially, you need to provide alternative functionality for users whose browsers do not fully support HTML5.
In this tutorial we’ll run through the basics of establishing user location. In practice, the browser may be getting its data from more than one possible source. For example it could be GPS data on a mobile device or simply IP address based data on any device connected to the Internet. However, your code does not need to concern itself with these details, you can simply retrieve and use the location data for the purposes of your own projects.
HTML5 Web Page
Use the following code to create an outline for your HTML5 page:
<!DOCTYPE html> <html> <head> <script> /*Location functions here*/ </script> </head> <body> </body> </html>We will place the JavaScript Geolocation functions in the page head script section and some basic HTML elements for testing and demonstrating the functionality in the body section.
HTML Demonstration Elements
Add the following markup to your HTML body section:
<input type="button" value="get location" onclick="getUserLocation()"/> <div id="locationData"> Location data here </div>You can call your Geolocation functions at any time, such as when the page loads, or in conjunction with jQuery document ready functions. To demonstrate, we’ll use the button to call the function and will write the location data into the div element, which has some simple placeholder text in it initially.
Get Position Function
The main method we will be using to determine user location is the getPosition method. Add the following function in the script section in your page head:
function getUserLocation() { //check if the geolocation object is supported, if so get position if (navigator.geolocation) navigator.geolocation.getCurrentPosition(displayLocation, displayError); else document.getElementById("locationData").innerHTML = "Sorry - your browser doesn't support geolocation!"; }This function is called when the user clicks the button. The code first checks that the navigator Geolocation object is present, which means the browser supports it. If the Geolocation object is supported, the code uses it to call the getCurrentPosition method.
The getCurrentPosition method takes two parameters indicating callback functions. The first is a function to call when the Geolocation data is received, while the second is a function to call if an error is returned instead.
If the Geolocation object is not supported, the function simply writes an error message to the page div element.
When a site attempts to retrieve the user location data for the first time, the user’s browser will prompt them to determine whether or not they consent to share their data. The function will only proceed if they do consent.
Display Location Function
Next we need to implement the function we included as first parameter to the getCurrentPosition method call. This function will be passed the user location data when the browser receives it. Add the following after your getUserLocation function:
function displayLocation(position) { //build text string including co-ordinate data passed in parameter var displayText = "User latitude is " + position.coords.latitude...
