This content originally appeared on DEV Community and was authored by Himanay Khajuria
The โGeolocation APIโ helps websites find a user's location with their permission. It is often used in navigation, maps and location-based services. ๐๐
In simple words, HTML5 Geolocation is a browser API that is used for getting the device geographic position in the form of latitude, longitude and accuracy coordinates. This can help detect the geolocation of the visitor or user on a website or app.
SYNTAX
{
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
}
๐ Geolocation Methods:
| Method | Description |
|---|---|
| getCurrentPosition() | Retrieve current geographic location website user |
| watchPosition() | Update the user's live location continuously |
| clearWatch() | Clear the ongoing watch of the user's location |
-
How does it workโ๐ค๐ญ
- Uses GPS, Wi-Fi & IP address to get the location
- Always returns latitude, longitude and accuracy properties
- Other properties are returned if available
- Asks for user permission for privacy and security reasons
Handling Success Response
๐ Success: Returns position object containing latitude & longitude
function showPosition(position){
var x = `Your current location is (Latitude: ${position.coords.latitude}, Longtitude: ${position.coords.longitude})`;
document.getElementById("location").innerHTML = x;
}
- Handling Errors
โ ๏ธError: Handles problems like permission denied or timeout
function showError(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation API.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
COMPLETE EXAMPLE OF GEOLOCATION API
<!DOCTYPE html>
<html>
<head>
<title>Geolocation API</title>
</head>
<body>
<h1>Find your Current location</h1>
<button onclick="getlocation()">Click me</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
function getlocation() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition, showError)
}
else
{
alert("Sorry! your browser is not supporting")
} }
function showPosition(position){
var x = `Your current location is (Latitude: ${position.coords.latitude}, Longtitude: ${position.coords.longitude})`;
document.getElementById("location").innerHTML = x;
}
function showError(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation API.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
</script>
</body>
</html>
-
Where is it used?
- ๐บ๏ธ Google Maps & Navigation Apps
- ๐ Food delivery & Ride-sharing apps
- ๐ค๏ธ Weather apps that show location-based updates
- ๐ Security & Tracking systems
-
๐ก๏ธ Privacy Considerations:
- ๐ Always ask for user permission before using location
- ๐ค๐ป Do not store or share location data without consent
๐ก Tip: Always handle user consent and fallback options when using a Geolocation API to ensure a seamless experience!๐แฏโค
I've created Technical Presentation on this topic. You can refer to it, along with the slide notes for a better understanding.
ABOUT ME: ๐ง๐ฝ I'm Frontend Developer based in Stockholm, Sweden, currently working at SITA.dev. My transition into tech has been a unique and rewarding adventure, fueled by curiosity and determination. You can connect with me on LinkedIn
This content originally appeared on DEV Community and was authored by Himanay Khajuria
Himanay Khajuria | Sciencx (2025-02-23T16:50:23+00:00) Geolocation API เชโ ๐๐ ๏ธ. Retrieved from https://www.scien.cx/2025/02/23/geolocation-api-%e0%aa%9c%e2%81%80-%f0%9f%93%8d%f0%9f%8f%a0%ef%b8%8e/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.