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¢er=" + 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/
