Access Users' Geo-Location with HTML5

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

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    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

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice