Home > DeveloperSection > Articles > getCurrentPosition method in HTML5

getCurrentPosition method in HTML5

Posted by  Awadhendra Tiwari
on    July-30-2011 20:12 PM

JQuery JQuery 
Ratings:
0 Comment(s)
 8932  View(s)
Rate this:

getCurrentPosition method in HTML5

Gelocation is the identification of the real world geographic location of an internet-connected computer, mobile device, website visitor or other. IP address geolocation data can include information such as country, region, and city, postal/zip code, latitude, longitude and time zone..... Today most of the browsers and mobile devices support Geolocation API. The geolocation APIs work with a new property of the global navigator object i.e. Geolocation object which can be created as follows:

var location = navigator.geolocation;

Gelocation method:

·         getCurrentPosition()

·         watchposition()

·         clearWatch()

The getCurrentPosition method retrieves the current geographic location of the user. The location information is returned in a position object. In this article I am trying to show you that how we can find out the user geographic location.

Code:

<script type="text/javascript">

        function Location(position)//location function is defining with parameter

         {

            var latitude = position.coords.latitude; //Specifies the longitude estimate in decimal degrees. The value range is [-180.00, +180.00].

            var longitude = position.coords.longitude;

            document.getElementById("lati").innerHTML = latitude; //latitude value is defining in label element where id is lati

            document.getElementById("longi").innerHTML = longitude;

        }

        function findLocation()

        {

            if (navigator.geolocation)//checking browser compatibility

             {

                navigator.geolocation.getCurrentPosition(Location);//getCurrentPosition method retrieve the current geographic location of the user 

            }

        }

    </script>

</head>

<html>

<body>

    Latitude:<label id="lati"></label><br /><br />

    Longitude:<label id="longi"></label><br /><br />

    <input type="submit" onclick="findLocation();" value="Find Location" />

</body>

When button is clicked latitude and longituudeof the user  will show on page as shown below:

getCurrentPosition method in HTML5
















Recent Activities

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