What is HTML5 Geolocation

In this article I have described the Geolocation in HTML5
  • 2365

INTRODUCTION

Every professional web developer knows that now is the time to start picking up HTML5.HTML5 Geolocation API lets you share your location with your favorite web sites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.Imagine how useful your site could be if it provided online timetables for all public transportation in a particular city. Using geolocation.

The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.

The getCurrentPosition() Method - Return Data
 

Geolocation methods getCurrentPosition() and getPositionUsingMethodName() specify the callback method that retrieves the location information.

Property Description
Coords.latitude Specifies the latitude estimate in decimal degrees.
Coords.longitude Specifies the longitude estimate in decimal degrees.
Coords.accuracy Specifies the accuracy of the latitude and longitude estimates in meters.
Coords.altitude Specifies the altitude estimate in meters above the WGS 84 ellipsoid.
Coords.altitudeAccuracy Specifies the accuracy of the altitude estimate in meters.
Coords.heading Specifies the device's current direction of movement in degrees counting clockwise relative to true north.
Coords.speed Specifies the device's current ground speed in meters per second.
Timestamp Specifies the time when the location information was retrieved and the Position object created.

Browsers supporting Geolocation


Firefox : Was the early adopter of Geolocation. It supports Geolocation from the version 3.5+.
Opera : Starts supporting Geolocation from the version 10.6 onwards.
Google Chrome 5+  : Supports Geolocation directly. Chrome version <4 supports through Gears API.
Safari 5+ : It supports Geolocation.
Android browser : Supports Geolocation through Gears API.
Internet Explorer 9+ : It supports Geolocation.
iPhone 3+ : It supports Geolocation.
Windows Phone 7.5+ : It supports Geolocation.
 

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
          if (navigator.geolocation)
           {
                       navigator.geolocation.getCurrentPosition(showPosition,showError);
           }
          else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
            x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 
}
function showError(error)
{
           switch(error.code) 
           {
                     case error.PERMISSION_DENIED:
                     x.innerHTML="User denied the request for Geolocation."
                     break;
                     case error.POSITION_UNAVAILABLE:
                     x.innerHTML="Location information is unavailable."
                     break;
                     case error.TIMEOUT:
                     x.innerHTML="The request to get user location timed out."
                     break;
                    case error.UNKNOWN_ERROR:
                     x.innerHTML="An unknown error occurred."
                     break;
             }
}
</script>
</body>
</html>

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.