Monday, January 29, 2018

How to Get Geolocation in HTML

In this post I will show how to get Geolocation.

OutPut:


Create a HTML file and copy paste the below HTML code.


<!DOCTYPE html>
<html>

<body>
    <div style="width:40%">
        <center>
            <hr>
            <p>Click on the below button to get your coordinates.</p>
            <hr>
            <button onclick="getLocation()" class="btn btn-primary">Get Location</button>
            <hr>
            <div id="div_gioloc" style="color:yellow; background-color: green; border-radius: 18px;"></div>
        </center>
    </div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</body>

</html>

Then copy paste the below code after script tag

 <script>
        var x = document.getElementById("div_gioloc");
        x.innerHTML = "Latitude: 0 <br>Longitude: 0";

        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>

The entire code looks as shown below

<!DOCTYPE html>
<html>

<body>
    <div style="width:40%">
        <center>
            <hr>
            <p>Click on the below button to get your coordinates.</p>
            <hr>
            <button onclick="getLocation()" class="btn btn-primary">Get Location</button>
            <hr>
            <div id="div_gioloc" style="color:yellow; background-color: green; border-radius: 18px;"></div>
        </center>
    </div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var x = document.getElementById("div_gioloc");
        x.innerHTML = "Latitude: 0 <br>Longitude: 0";

        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>

No comments:

Post a Comment