HTML5 Geolocation Tutorial with Examples
HTML5 geolocation API and location-aware browsing features of new web browsers and mobile devices makes it possible for HTML developers to use visitor's current position and response according to the visitors physical position on Earth. This HTML5 Geolocation tutorial will give web programmers about the basics of Geolocation API introduced with HTML5.
HTML5 Geolocation Browser Support
To see if the visitor's web browser support HTML5 geolocation or not, developers can make a call to existence of navigator.geolocation object. If navigator.geolocation returns false then web browser does not support HTML5 Geolocation, otherwise you can use Geolocation features and properties in your web application.
Here is a Javascript code you can use in your HTML5 programming codes to test browser Geolocation support
<script>
if (navigator.geolocation) {
// Web browser support HTML5 Geolocation API
} else {
// Web browser does not support HTML5 Geolocation API
}
</script>
HTML5 Geolocation Example Code
After you test HTML5 browser support for geolocation feature, you are ready to use navigator.geolocation methods. To display web user's current position using navigator.geolocation object getCurrentPosition method is enough.
When calling getCurrentPosition() method, we define a Javascript function which will process location data (latitude and longitude coordinates) as an input parameter to the getCurrentPosition() method.
The target Javascript function takes an object parameter which stores the geolocation data.
In this HTML5 geolocation tutorial, I will show codes of a geolocation example demonstrating use of getCurrentPosition method.
The physical position of the device where web browser is running on can be reached using geolocation.coords.latitude and geolocation.coords.longitude properties.
<script>
function HTML5Geolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayGeolocation);
}
}
function displayGeolocation(geolocation) {
alert("Latitude: " + geolocation.coords.latitude + " Longitude: " + geolocation.coords.longitude);
}
</script>
Web developers can find an HTML5 Geolocation example to see HTML5 and Javascript codes published here in action.
When web page requests user's current position using HTML5 Geolocation API, the user is warned with a message similar as shown (this message is from Opera web browser)
Web user is free to allow web page to get user's current position or deny to give geolocation information to web site
share my location using HTML5 geolocation API or deny
HTML5 Geolocation example code output on a sample location-aware browsing application