HTML5 Geolocation API with Example ~ Web CodeHelpers

HTML5 Geolocation API with Example

HTML5 Geolocation API :

One of the best API's from HTML5 API's,  geolocation API is used to track the user location instantly.

Geolocation API used in lot of website like google , to track the user location and to show the results related to that location, in this article we are going to learn in detail about geolocation with example

Geolocation API  :

Geolocation comes with three methods

1.  geolocation.getCurrentPosition()
2.  geolocation.watchPosition()
3.  geolocation.clearPosition()


to use the HTML5 Geolocation API,
As a first step we need to check weather your browser support this HTML5 Geolocation API

Navigator Object will holds the geolocation property

//Checking Geolocation Availability
  <script>
if (navigator.geolocation) {
alert("Your Browser Support Geolocation Feature");
}else {
alert("Your Browser does not Support Geolocation Feature");
}
</script>

if your developing  desktop based web application, then use below geolocation.getCurrentPosition() method

navigator.geolocation.getCurrentPosition(success_function, error_function, position_options);

if your developing mobile based app or mobile web application, then use the below method to get the accurate postion

navigator.geolocation.watchPosition(success_function, error_function, position_options);


to clear the existing positions like latitude and longitude on move for mobile apps and mobile web application use below method

navigator.geolocation.clearPosition(watch_position_id)

in Success Function Call Back  is passed a single parameter, a "position" object which has the following properties:

  • position.coords.latitude – The current latitude reading
  • position.coords.longitude – The current longitude reading
  • position.coords.accuracy – The accuracy of the current latitude and longitude readings (in metres)
  • position.coords.speed – The current speed reading in metres per second (you can simply multiply by 2.2369 to convert to miles per hour or multiply by 3.6 to convert to kilometres per hour)
  • position.coords.altitude – The current altitude reading (in metres)
  • position.coords.altitudeAccuracy – The accuracy of the current altitude reading (in metres)


Below example will show to track the Current Location Address 
Live Demo : Your Location Show below Refresh to check your location
Code Show Below
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 <script>
if (navigator.geolocation) {
navigator.geolocation.watchPosition(fnSuccessGeoCall, fnErrorGeoCall);
}else {
alert("Your Browser does not Support Geolocation Feature");
}

    function fnSuccessGeoCall(position){
                 var lat = position.coords.latitude,
 lng = position.coords.longitude;
               var requestAdd = $.ajax( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=true" )
                .done(function(data) {  
                            $('#showMapAddress').html(data.results[0].formatted_address);
                 })
                .fail(function() {
                       $('#showMapAddress').html("Geo Error");});
    }
    function fnErrorGeoCall(error){
                       $('#showMapAddress').html("Geo Error Code:"+error.code);});
    }
</script>
<div id="showMapAddress"></div>


0 comments :

Post a Comment

Subscribe updates via Email