Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Access Users' Geo-Location with HTML5 (http://www.go4expert.com/articles/access-users-geo-location-html5-t28796/)

pradeep 27Jul2012 17:59

Access Users' Geo-Location with HTML5
 
Nowadays location-aware applications are everywhere, with advent of HTML5 and support for it all major web browsers it has become very easy to grab a user's Geo-location and use it to display customized content or display a map or whatever you can imagine to do with it.

Earlier IP was the only source of getting Geo-location information of a user, which needed additional server side scripts and extra call to the server, with HTML5 everything can be done on the client end.

Let's move ahead and see how to implement it.

Getting User's Geo-Location



W3C has developed APIs which allow any device (like your Android phone, iPhone, etc.) or you desktop/laptop browser to fetch the Geo-location of the user on the client side itself, and as a matter of fact all popular browsers' relatively new version support the Geo-location APIs.

In the following example we'll see a demo page where the user's location will be fetched when a button is clicked.

HTML Code:

<!DOCTYPE>
<html>
 <head>
  <title></title>
  <meta name="Author" content="Pradeep">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script> 
        $(document).ready(function(){ 
            $("#btGeoLocation").click(get_geolocation); 
        }); 
 
        function get_geolocation() { 
        // set a callback for the position when ready
            navigator.geolocation.getCurrentPosition(geolocation_cb); 
        } 
 
        function geolocation_cb(geo){ 
            alert('Lat: ' + geo.coords.latitude + ' ' + 'Lon: ' + geo.coords.longitude); 
        } 
  </script> 
 </head>
 <body>
 <button id="btGeoLocation" >Get Geo-Location</button> 
 </body>
</html>

When the button is pressed the user will be prompted for providing access to the location, when approved the callback function will get the correct data.

Showing A Map Using The Geolocation



In the following demo which is very similar to the previous one, except for that we'll be using the Google Maps static image API to show the map of the fetched location data to a user.

HTML Code:

<!DOCTYPE>
<html>
 <head>
  <title></title>
  <meta name="Author" content="Pradeep">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script> 
        $(document).ready(function(){ 
            $("#btGeoLocation").click(get_geolocation); 
        }); 
 
        function get_geolocation() { 
            // set a callback for the position when ready
            navigator.geolocation.getCurrentPosition(geolocation_cb); 
        } 
 
        function geolocation_cb(geo){ 
            // create google maps image url
            var map_image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + geo.coords.latitude + ',' + geo.coords.longitude +                        "&zoom=10&size=500x500&markers=color:blue|label:S|" + geo.coords.latitude + ',' + geo.coords.longitude; 

            // clear any previous map
            $('#mapimg').remove();

            $('#map').append($('<img>').attr('src',map_image_url).attr('id','mapimg'));
        } 
  </script> 
 </head>
 <body>
 <button id="btGeoLocation" >Get Geo-Location</button>
 <span id="map"></span>
 </body>
</html>

References



http://html5readiness.com/


All times are GMT +5.5. The time now is 17:58.