Home > DeveloperSection > Articles > HTML5 Geolocation

HTML5 Geolocation


HTML5 HTML5 
Ratings:
0 Comment(s)
 3852  View(s)
Rate this:

HTML5 Geolocation

HTML5 Geolocation is used to locate a user's position

Note: The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.

For getting user location, API use getCurrentPosition() method. This method gets longitude and latitude points of user. Latitude and longitude is a coordinate that enables every location on the Earth to be specified by a set of numbers and/or letters.

Here we demonstrate to pick current position (Latitude and Longitute) of user.

<!DOCTYPE html>

<html>

<head>

<title>Get latitude and longitude</title>

</head>

<body>

<p id="latLog"></p>

 

<script type="text/javascript">

    var x = document.getElementById("latLog");

    window.onload = function getLocation() {

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(showPosition);

        }

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

    }

    function showPosition(position) {

        x.innerHTML = "Latitude: " + position.coords.latitude +

  "<br>Longitude: " + position.coords.longitude;

    }

</script>

</body>

</html>

Output

Latitude: 25.450001
Longitude: 81.849998

Note: Latitude and longitude values are differing for every user.

Now these values (latitude and longitude) we pass to goggle map API that display UI position of user.

HTML5 - Using Geolocation

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

        var x = document.getElementById("ErrorMsg");

      window.onload= function getLocation() {

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(showPosition, showError);

            }

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

        }

 

        function showPosition(position) {

            lat = position.coords.latitude;

            lon = position.coords.longitude;

            latlon = new google.maps.LatLng(lat, lon)

            mapholder = document.getElementById('mapholder')

            mapholder.style.height = '200px';

            mapholder.style.width = '600px';

 

            var myOptions = {

                center: latlon, zoom: 14,

                mapTypeId: google.maps.MapTypeId.ROADMAP,

                mapTypeControl: false,

                navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }

            };

            var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);

            var marker = new google.maps.Marker({ position: latlon, map: map, title: "You are here!" });

        }

 

        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>

</head>

<body>

<p id="ErrorMsg"></p>

<div id="mapholder" style="border:2px solid black;"></div>

</body>

</html>

 

Screen Shot

HTML5 Geolocation

Handling Errors and Rejections

In the above code we used getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location.

Meaning of Error Codes:

 ·        Permission denied - The user did not allow Geolocation

 ·         Position unavailable - It is not possible to get the current location

 ·         Timeout - The operation timed out

The other properties below are returned if available.

Property

Description

coords.latitude

The latitude as a decimal number

coords.longitude

The longitude as a decimal number

coords.accuracy

The accuracy of position

coords.altitude

The altitude in meters above the mean sea level

coords.altitudeAccuracy

The altitude accuracy of position

coords.heading

The heading as degrees clockwise from North

coords.speed

The speed in meters per second

timestamp

The date/time of the response

Geolocation object - Other interesting Methods

watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).

clearWatch() - Stops the watchPosition() method.


Don't want to miss updates? Please click the below button!

Follow MindStick