HTML5 Geolocation API

The HTML5 Geolocation API displays a user’s current position in the browser.

Locating the User’s Current Position

The HTML5 displays the geographical position of the user. Since this API compromised privacy, that’s why users have to enable this feature before starting using it.

Browsers Support for HTML5 Geolocation API

Below is the list of browsers, along with their latest versions that fully support Geolocation API.

Google Chrome 5.0 – 49.0
Microsoft Edge 9.0
Firefox 3.5
Opera 16.0
Safari 5.0

In the advanced versions of Google Chrome, Geolocation only work for secure contexts like HTTPS. If your website is not SSL encrypted, the request for Geolocation API does not work.

Using HTML5 Geolocation API in HTML5 Document

The by-default Geolocation method getCurrentPosition() returns the user’s current location. The code example below returns the user’s location in longitude and latitude

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Geolocation API</title>
</head>
<body>
    <p>Click the button below to know both your latitudes and longitude</p>
    <p> <button type="button" onclick="getLocation()"> Click here</button> </p>
    <p id="sample"></p>
    <script>
        var y = document.getElementById("sample");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                y.innerHTML = "Your browser does not support geolocation API.";
            }
        }
        function showPosition(position) {
            y.innerHTML = "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }
    </script>
</body>
</html>

It is how Geolocation’s getCurrentPosiiton() method will display in the browser.

HTML5 Geolocation API

Explanation of the Code

First of all, we’ll check whether the out browser supports HTML5 geolocation API or not.
If our browser supports this feature, then we’ll use the pre-defined function getCurrentPosition(). If not, we’ll display the message to the user.
If the getCurrentPosition() works perfectly well, it will return a current coordinate of the users defined in the showPosition().
The showPosition() displays the location of the user in longitude and latitude.

In the above example, we’ve used a basic HTML5 Geolocation API with no exception handling.

Error Handling

The second parameter of the showCurrentPosition() that is showError() does error handling.

Here is the code example for error handling in Geolocation API

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Geolocation API</title>
</head>
<body>
    <p>Click the button below to know both your latitudes and longitude</p>
    <p> <button type="button" onclick="getLocation()"> Click here</button> </p>
    <p id="sample"></p>
    <script>
        var y = document.getElementById("sample");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                y.innerHTML = "Your browser does not support geolocation API.";
            }
        }
        function showPosition(position) {
            y.innerHTML = "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }
        function showError() {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    y.innerHTML = "user denied the geolocation request."
                    break;
                case error.POSITION_UNAVAILABLE:
                    y.innerHTML = " location information is not available."
                    break;
                case error.TIMEOUT:
                    y.innerHTML = " the request to retrieve user location has timed out."
                    break;
            }
        }
    </script>
</body>
</html>

The output of this code will be

HTML5 Geolocation API

Values Returned by getCurrentPosition()

Upon the successful execution of getCurrentPosition(), it returns an object that comprises latitude, longitude, and accuracy properties. The other properties that this method pre-defined can return as well are:

timestamp: returns the data/time of the response
coords. speed: returns speed in meter/second.
coords.heading: returns how many degrees a person is clockwise from the north
coords.altitudeAccuracy: returns how much accurate altitude is.
coords.altitude: return altitude that is above the sea level and expressed in meters.
coords.accuracy: returns the accuracy of the position.
coords.longitude: returns longitude in a decimal number.
coords.latitude: returns latitude as a decimal number

Other Interesting Methods of Geolocation API

The Geolocation API contains some other interesting others as well, such as:

watchPosition() – keeps returning the current location of the user while he is travelling like Google map.
clearWatch() – eliminates the watchPosiiton() method.

The code example below showed how to use watchPosition() in the HTML5 document. To run this function, you need a GPS-enabled device.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Geolocation API</title>
</head>
<body>
    <p>Click the button below to know your current location </p>
    <p> <button type="button" onclick="getLocation()"> Click here</button> </p>
    <p id="sample"></p>
    <script>
        var y = document.getElementById("sample");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.watchPosition(showPosition);
            } else {
                y.innerHTML = "Your browser does not support showPosition() method.";
            }
        }
        function showPosition(position) {
            y.innerHTML = "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }
    </script>
</body>
</html>

It is how the watchPosition() will appear in the browser:

HTML5 Geolocation API

To learn more about geolocation, read documentation.

Next Lesson » « Previous Lesson