Get user location from Browser using javascript and Geolocation API -

Steps to get user location from browser using javascript and HTML Geolocation API

if(window.navigator.geolocation){ //alert('Browser support'); window.navigator.geolocation.getCurrentPosition(mycoords,myerrors); } else{ alert('Browser does not support'); }
function mycoords(position)
{
var lat = position.coords.latitude;
var long = position.coords.longitude;
//alert(lat+'/'+long);
var myapi = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+long+"&key=your API key"; $.get(myapi,function(data)
{ console.log(data); $('#user_location').val(data.results[2].formatted_address); });
}
https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+long+"&key=your API key
function myerrors(error)
{ if(error.code=0)
{
alert('Unknown Error');
}
else if(error.code=1)
{
alert('Permission Denied');
}
else if(error.code=2)
{
alert('Position Unavailable');
}
else
{ alert('Time Out');
}
}
  • Unknown error.
  • Permission Denied.
  • Position unavailable.
  • Time Out.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> 
<body>
<div class="container" style="width: 60%;"> <br><br><br><br>
<h3>Get user location from browser using javascript and HTML Geolocation API</h3>
<div class="form-group">
<button type="button" class="btn btn-success btn-sm" onclick="getlocation()">Click here to get user location</button> </div>
<div class="form-group">
<input type="text" class="form-control" id="user_location">
</div>
</div>
<script>
function getlocation()
{ if(window.navigator.geolocation){ //alert('Browser support'); window.navigator.geolocation.getCurrentPosition(mycoords,myerrors); }
else
{ alert('Browser does not support');
}
}
function mycoords(position)
{
var lat = position.coords.latitude;
var long = position.coords.longitude;
//alert(lat+'/'+long);
var myapi = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+long+"&key=AIzaSyBh1__iOLq4pmTZES2w8Ss1dWFs2ITWCys";
$.get(myapi,function(data)
{ console.log(data); $('#user_location').val(data.results[2].formatted_address); });
}
function myerrors(error)
{ if(error.code=0)
{ alert('Unknown Error');
}
else if(error.code=1)
{
alert('Permission Denied');
}
else if(error.code=2)
{
alert('Position Unavailable');
} else{ alert('Time Out');
}
}
</script>
</body>
</html>

--

--

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bipsmedium

Bipsmedium

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.