HTML5 and Geolocation API
HTML5 comes with Geolocation API which allows user to provide their location to the web application. This is totally secure and user will always be asked for permission whether or not to provide information about their location.The Geolocation API is provided with navigator.geolocation object of the BOM (Browser Object Model)
Current Position
To obtain the user's current location, you can call the getCurrentPosition() method of the geolocation object. It takes the success function as first parameter which setups position object in the function argument. The second parameter is an error function which setups error object in the function argument.navigator.geolocation.getCurrentPosition(function(position) { }, function(error) { });
position.coords.latitude
position.coords.longitude
We can use the watchid value in tandem with the clearWatch() method to stop watching the user's location.
You can get the below code in Github Gist also -
https://gist.github.com/satya-jugran/af36aec8672ce155ee03476bab87da6b
Watch Position
If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the watchPosition() function, which has the same input parameters as getCurrentPosition().var watchID = navigator.geolocation.watchPosition(function(position) { });
navigator.geolocation.clearWatch(watchID);
Demo Source Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="geo-wrapper" width="600" height="400"></div> <span id="geo-error"></span> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> $(function(){ if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(show_map,show_map_error); } else { $("#geo-error").html('Your browser does not support geolocation.'); } }); function show_map(loc){ var lat = loc.coords.latitude; var lon = loc.coords.longitude; var lat_lon = new google.maps.LatLng(lat,lon); mapholder = document.getElementById('geo-wrapper') mapholder.style.height = '250px'; mapholder.style.width = '500px'; var mapOptions = { center:lat_lon, zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} } var map = new google.maps.Map(document.getElementById("geo-wrapper"), mapOptions); var marker = new google.maps.Marker({position:lat_lon, map:map, title:"You are here.!"}); } function show_map_error(error){ var x = document.getElementById("geo-error"); switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } </script> </body> </html>
You can get the below code in Github Gist also -
https://gist.github.com/satya-jugran/af36aec8672ce155ee03476bab87da6b