SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software
HTML5 Tutorials and HTML5 Code Samples and HTML component examples for Web Developers


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>
Code

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>
Code

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)

HTML5 geolocation request warning

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
share my location using HTML5 geolocation API or deny

HTML5 Geolocation example code for web programmers
HTML5 Geolocation example code output on a sample location-aware browsing application



HTML5


Copyright © 2004 - 2021 Eralper YILMAZ. All rights reserved.