Get current location of user using 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.Browser Support
- 9+
- 5+
- 44+
- 5+
- 36+
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.JS
12345
if ("geolocation" in navigator){ //check Geolocation available
//things to do
}else{
console.log("Geolocation not available!");
}JS
12345678
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.JQUERY
12345678910
$("#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!");
}
});HTML
12
<button id="find_btn">Find Me</button>
<div id="result"></div>jQuery & Google Map JavaScript API
Here’s how you can incorporate Google map into your JavaScript code.JQUERY
12345678910111213141516171819202122232425
<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>HTML
12
<button id="find_btn">Find Me</button>
<div id="map"></div>Error Handling
To handle any errors, we can use second parameters of getCurrentPosition(). 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.JQUERY
123456789101112131415161718192021222324252627282930313233343536373839404142434445
<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>HTML
12
<button id="my_location">Find Me</button>
<div id="map"></div>
