HTML Geolocation
In this page:
navigator.geolocation.getCurrentPosition(
(position) => { /* position.coords */ },
(error) => { /* handle error */ }
);Understanding Geolocation
The Geolocation API allows web applications to request the user's geographic coordinates. The browser uses cell towers, Wi-Fi networks, and GPS sensors to determine your position.
Example: Understanding Geolocation
<script>
if (navigator.geolocation) {
console.log('Geolocation is supported');
}
</script>Getting the Current Position
To find the user's exact coordinates, you use the getCurrentPosition method. This method requests the user's location and returns their latitude and longitude coordinates upon success.
Example: Getting the Current Position
<script>
navigator.geolocation.getCurrentPosition(function (position) {
console.log(position.coords.latitude, position.coords.longitude);
});
</script>Handling Permission Denials
Since geolocation is a private API, users can choose to block the location request. Your scripts must handle permission denials and fallback gracefully without crashing your page.
Example: Handling Permission Denials
<script>
navigator.geolocation.getCurrentPosition(
function (position) { console.log(position.coords); },
function (error) { console.log('Location access denied:', error.message); }
);
</script>Real-Time Position Tracking
If you are building an interactive map or navigation app, you need to track the user's location as they move. You can use the watchPosition method to monitor and update their coordinates in real-time.
Example: Real-Time Position Tracking
<script>
const watchId = navigator.geolocation.watchPosition(function (position) {
console.log(position.coords.latitude, position.coords.longitude);
});
navigator.geolocation.clearWatch(watchId);
</script>Managing Location Accuracy
By default, browsers prioritize speed over precision. You can pass configuration options (like enableHighAccuracy) to force the browser to use high-precision GPS sensors to determine your position.
Example: Managing Location Accuracy
<script>
navigator.geolocation.getCurrentPosition(
function (position) { console.log(position.coords); },
function (error) { console.log(error); },
{ enableHighAccuracy: true }
);
</script>watchPosition vs getCurrentPosition
getCurrentPosition asks for the user's location a single time and stops. watchPosition keeps monitoring and calls your callback function repeatedly every time the user's location changes, which is what live tracking features like a map showing a moving delivery need.
Example: watchPosition vs getCurrentPosition
<script>
navigator.geolocation.getCurrentPosition(pos => console.log('Once:', pos.coords));
const id = navigator.geolocation.watchPosition(pos => console.log('Updated:', pos.coords));
</script>Privacy Considerations
Location data is highly sensitive personal information, so browsers always require explicit user permission before sharing it, and that permission can be revoked at any time.
Sites should only request location when there is a clear, obvious reason the user will understand, like showing nearby stores.
Example: Privacy Considerations
<button onclick="navigator.geolocation.getCurrentPosition(pos => console.log(pos))">
Show nearby stores
</button>- Attempting to test geolocation on insecure HTTP domains, causing browsers to block the API.
- Failing to handle permission denials, which can freeze your scripts when users block location requests.
- Forgetting to stop watchPosition tracking, which drains mobile device batteries.
- The Geolocation API allows web applications to request user coordinates securely over HTTPS.
- Use getCurrentPosition to find coordinates once, and watchPosition to track movement in real-time.
- Always handle permission denials and configure timeout options to keep your scripts running smoothly.
Standard Geolocation API features are natively supported by all modern web browsers.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: