Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Access Users' Geo-Location with HTML

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 498
    Comment on it

    Hello Everyone!!

    Nowadays, We can use the HTML5 to find the Geo-location of the user.  Earlier IP was the source of getting the location of the user so that we used additional scripting and also the calling of the server, but using html 5 we can do it at the user end.

    W3C has developed an API,  called geolocation API , is used to find the location of the user if the user want to share there location on the web. It allows all the devices (like iPhone, tablet, Android) and desktop and laptop.

    CODE:- 

    
    <!DOCTYPE>
    <html>
     <head>
      <title></title>
      <meta name="Author" content="Sudhanshu">
      <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 user click the button for share the  location then we find the location of the user by using getCurrentPosition() function.

    Showing A Map Using The Geolocation:-

    we can use map also to show the location of the user .

    CODE:-

    <html>
     <head>
      <title></title>
      <meta name="Author" content="Sudhanshu">
      <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>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: