1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Access Users' Geo-Location with HTML5

Discussion in 'Web Design, HTML And CSS Tutorials' started by pradeep, Jul 27, 2012.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    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:
    <!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:
    <!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/
     

Share This Page