How to get the location of the user using jQuery

by jamied_uk 13th May 2016, 20:51

codingsec.net/2016/05/get-location-user-using-jquery

In this article I am going to show you how to get the location of the user using the jQuery.
Geolocation API is an important feature available in modern HTML5 web browsers, which allows us to request current location of the user using JavaScript, the location information is represented by latitude and longitude coordinates. For privacy reasons, the user permission is required to access its location information.

JavaScript and Geolocation

In our JavaScript, we can use getCurrentPosition() method to obtain user’s current location, but first we need to know whether Geolocation API is available in browser before we can continue.

Code:: if (“geolocation” in navigator){ //check Geolocation available //things to do }else{ console.log(“Geolocation not available!”); } Now we can obtain the location of the user like so : if (“geolocation” in navigator){ //check geolocation available //try to get user current location using getCurrentPosition() method navigator.geolocation.getCurrentPosition(function(position){ console.log(“Found your location \nLat : “+position.coords.latitude+” \nLang :”+ position.coords.longitude); }); }else{ console.log(“Browser doesn’t support geolocation!”); } jQuery Once we know how to get the current location of the user, we can implement this JavaScript code in our jQuery click method. $(“#find_btn”).click(function () { //user clicks button if (“geolocation” in navigator){ //check geolocation available //try to get user current location using getCurrentPosition() method navigator.geolocation.getCurrentPosition(function(position){ $(“#result”).html(“Found your location <br />Lat : “+position.coords.latitude+” </br>Lang :”+ position.coords.longitude); }); }else{ console.log(“Browser doesn’t support geolocation!”); } }); jQuery & Google Map JavaScript API Here’s how you can incorporate Google map into your JavaScript code. <script type=“text/javascript”> var map; function initMap() { var mapCenter = new google.maps.LatLng(47.6145, –122.3418); //Google map Coordinates map = new google.maps.Map($(“#map”)[0], { center: mapCenter, zoom: 8 }); } $(“#find_btn”).click(function (){ if (“geolocation” in navigator){ navigator.geolocation.getCurrentPosition(function(position){ infoWindow = new google.maps.InfoWindow({map: map}); var pos = {lat: position.coords.latitude, lng: position.coords.longitude}; infoWindow.setPosition(pos); infoWindow.setContent(“Found your location <br />Lat : “+position.coords.latitude+” </br>Lang :”+ position.coords.longitude); map.panTo(pos); }); }else{ console.log(“Browser doesn’t support geolocation!”); } }); </script> <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap” async defer></script> [center] [/center] Error Handling To handle any errors, we can use second parameters of [i]getCurrentPosition()[/i]. If anything fails, it will invoke the error callback, letting us update the user with corresponding error message. Let’s break it down a bit for your understanding. <script type=“text/javascript”> var map; function initMap() { map = new google.maps.Map($(“#map”)[0], { center: {lat: –34.397, lng: 150.644}, zoom: 8 }); } $(“#my_location”).click(function (){ //user click on button if (“geolocation” in navigator){ navigator.geolocation.getCurrentPosition(show_location, show_error, {timeout:1000, enableHighAccuracy: true}); //position request }else{ console.log(“Browser doesn’t support geolocation!”); } }); //Success Callback function show_location(position){ infoWindow = new google.maps.InfoWindow({map: map}); var pos = {lat: position.coords.latitude, lng: position.coords.longitude}; infoWindow.setPosition(pos); infoWindow.setContent(‘User Location found.’); map.setCenter(pos); } //Error Callback function show_error(error){ switch(error.code) { case error.PERMISSION_DENIED: alert(“Permission denied by user.”); break; case error.POSITION_UNAVAILABLE: alert(“Location position unavailable.”); break; case error.TIMEOUT: alert(“Request timeout.”); break; case error.UNKNOWN_ERROR: alert(“Unknown error.”); break; } } </script> <script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCw-Viepxab4m9pRRQyjm_yRq1uhOj9iPc&callback=initMap” async defer></script>

In the third parameter of getCurrentPosition(), the enableHighAccuracy attribute tries to provide best results, but this may cause slower response and can increase the power consumption of the device.