In this article we will learn How to get the latitude and longitude in JavaScript. The user’s current location can be found using the getCurrentPosition() method. The geolocation API that HTML5 offers us allows us to determine the geographical location of the user. The Geolocation API provides the latitude and longitude of the user’s current location, which is then passed to the backend via JavaScript and displayed on the website.
The read-only Longitude property of the GeolocationCoordinates interface is a double-precision floating-point value that represents the longitude of the location in decimal degrees.
The GeolocationCooperatives object is a component of the GeolocationPosition interface because it is the type of object provided by Geolocation API calls that capture a geographic location and provide it with a DOMTimeStamp that provides the measurement time.
See also
Syntax
navigator.geolocation.getCurrentPosition(success, error, options);
Parameters − It contains three parameters, which are listed below and are detailed above:
- success − This is a function that is used when the data from the getCurrentPosition() API method has been successfully collected.
- error − It also includes a callback function that sends back the location’s warnings and errors.
- options − Setting a timer, enabling High Accuracy, and the maximumAge is helpful.
Get the latitude and longitude in JavaScript?
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to get the latitude and longitude in JavaScript?</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="background:#e6e6e6;padding-bottom: 20px;">
<div class="py-5 text-center">
<h2>How to get the latitude and longitude in JavaScript?</h2>
</div>
<div class="py-5 text-center">
<button onclick="getLocation()" type="button" class="btn btn-primary">Get My Location</button>
<div id="result"></div>
</div>
</div>
<script type="text/javascript">
let result = document.getElementById("result");
function showLocation(position) {
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
result.innerHTML = "Latitude: " + latitude + "<br>Longitude: " + longitude;
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
let options = {timeout:60000};
navigator.geolocation.getCurrentPosition
(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</body>
</html>Difference between latitude and longitude
Latitude and Longitude are known as geographical coordinates, which offer a systematic network of lines. They help determine the location, distance, and direction of various points on the Earth.
| LATITUDE | LONGITUDE |
| The geographic coordinates that indicate the distance of a location north-south of the equator are referred to as latitude. | Longitude refers to a geographic coordinate that indicates a point’s east-west distance from the Prime Meridian. |
| It’s referred to as parallelism. | It’s referred to as meridians |
| The lines are of various lengths. | The lines are all the same length. |
| It divides the world into heat zones. | It is used to categorise time zones. |
| There are 180 lines of latitude. | There are 360 lines of longitude. |
Frequently Asked Questions
What is latitude and longitude
Both longitude and latitude are angles measured with the center of the earth as an origin. A longitude is an angle from the prime merdian, measured to the east (longitudes to the west are negative). Latitudes measure an angle up from the equator (latitudes to the south are negative).
Latitude and Longitude of India
20.5937° N, 78.9629° E
You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊
