View video tutorial

HTML Geolocation

HTML

The Geolocation API allows the user to provide their location information to web applications if they want to do so.

Find your location

You can find your geographical position using Geolocation API on HTML page.

Since it it a privacy and security issue, the position will not be not available unless the you approve the permission.

The Geolocation API


This API helps user to put their location information on a web page.

Users are asked to give the permission to make location information publicly available as it is a security issue.

The Geolocation API is accessed via a call to navigator.geolocation which returns a Geolocation object.

The Geolocation object has methods Geolocation.getCurrentPosition(), Geolocation.watchPosition() and Geolocation.clearWatch().

Geolocation.getCurrentPosition() returns back a GeolocationPosition object with the data of user device's current location.

Geolocation.watchPosition() returns the updated location each time device location changes.

Geolocation.clearWatch() Removes the particular handler method previously registered using watchPosition().

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation Example</title>
</head>
<body>
    <h2>Geolocation Example</h2>
    <p>Click Show Data button to get device coordinates.</p>
    <button onclick="getLocation()">Show Data</button>
    <p id="demo"></p>
    <script>
        var x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    x.innerHTML = "Latitude: " + position.coords.latitude +
                        "<br> Longitude: " + position.coords.longitude;

                });

            } else {
                x.innerHTML = "Geolocation is not supported by your browser.";
            }
        }
    </script>
</body>

</html>
Try it Now »

Click on the "See output" button to see how it works.


Code with Error Handler

Copy each file contents and paste it to your project, run and see the final output when everything is OK.

Example

<!DOCTYPE html>
<html>

<head>
    <title>Geolocation Example  with Error Handler</title>
</head>

<body>
    <h2>Geolocation Example  with Error Handler</h2>
    <p>Click Show Data button to get device coordinates.</p>
    <button onclick="getLocation()">Show Data</button>
    <p id="demo"></p>
    <script>
        var x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    x.innerHTML = "Latitude: " + position.coords.latitude +
                        "<br> Longitude: " + position.coords.longitude;

                },showError);

            } else {
                x.innerHTML = "Geolocation is not supported by your browser.";
            }
        }


        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>
Try it Now »

Click on the "Try it Now" button to see how it works.


Example for watchPosition().

Copy each file contents and paste it to your project, run and see the final output when everything is OK.

Example

<!DOCTYPE html>
<html>

<head>
    <title>Geolocation Example  with Error Handler</title>
</head>

<body>
    <h2>Geolocation Example  with Error Handler</h2>
    <p>Click Show Data button to get device coordinates.</p>
    <button onclick="getLocation()">Show Data</button>
    <p id="demo"></p>
    <script>
        var x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.watchPosition(function (position) {
                    x.innerHTML = "Latitude: " + position.coords.latitude +
                        "<br> Longitude: " + position.coords.longitude;

                },showError);

            } else {
                x.innerHTML = "Geolocation is not supported by your browser.";
            }
        }


        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>
Try it Now »

Click on the "Try it Now" button to see how it works.


The other properties of GeolocationPosition object


coords.accuracy The accuracy of position (always returned).

coords.altitude The altitude in meters above the mean sea level (returned if available).

coords.altitudeAccuracy The altitude accuracy of position (returned if available).

coords.heading The heading as degrees clockwise from North (returned if available).

coords.latitude The latitude as a decimal number (always returned).

coords.longitude The longitude as a decimal number (always returned).

coords.speed The speed in meters per second (returned if available)