How to get the location of the user using jQuery

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.