HTML5 Geolocation allows web applications to access the geographical location of a user’s device with their consent.
This is useful for building location-based services such as maps, weather updates, and geotagging.
In this tutorial, you’ll learn:
- What is Geolocation?
- How to use the Geolocation API.
- Displaying the user’s location.
- Handling errors and fallback options.
- Practical examples of Geolocation.
1. What is Geolocation?
The Geolocation API allows websites to retrieve the user’s location (latitude and longitude). However:
- User permission is required for access.
- Accuracy depends on the device’s GPS, Wi-Fi, IP address, or cellular data.
Common Use Cases:
- Locating nearby services or points of interest.
- Providing turn-by-turn navigation.
- Displaying weather based on location.
- Geotagging photos or activities.
2. Basic Geolocation API
Syntax
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
- getCurrentPosition: Retrieves the user’s current position.
- successCallback: A function executed when the location is successfully retrieved.
- errorCallback: A function executed if an error occurs.
- options: Optional parameters to customize location retrieval.
Example 1: Basic Geolocation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Geolocation</title>
</head>
<body>
<h1>Get User Location</h1>
<button onclick="getLocation()">Get My Location</button>
<p id="output">Click the button to get your location.</p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
document.getElementById('output').textContent =
`Latitude: ${latitude}, Longitude: ${longitude}`;
},
(error) => {
document.getElementById('output').textContent = `Error: ${error.message}`;
}
);
} else {
document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
}
}
</script>
</body>
</html>
Explanation:
- position.coords.latitude and position.coords.longitude: Retrieve the user’s latitude and longitude.
- Handles errors if location services are denied or unavailable.
3. Displaying the Location on a Map
Use services like Google Maps or OpenStreetMap to visualize the user’s location.
Example 2: Show Location on Google Maps
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation on Google Maps</title>
</head>
<body>
<h1>My Location on Google Maps</h1>
<button onclick="showMap()">Show My Location</button>
<p id="output">Click the button to find your location.</p>
<iframe id="map" width="600" height="450" style="border:0; display:none;"></iframe>
<script>
function showMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
document.getElementById('output').textContent =
`Latitude: ${latitude}, Longitude: ${longitude}`;
const mapUrl = `https://www.google.com/maps/embed/v1/view?key=YOUR_API_KEY¢er=${latitude},${longitude}&zoom=14`;
const map = document.getElementById('map');
map.src = mapUrl;
map.style.display = "block";
},
(error) => {
document.getElementById('output').textContent = `Error: ${error.message}`;
}
);
} else {
document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
}
}
</script>
</body>
</html>
Explanation:
- Replace YOUR_API_KEY with your Google Maps API key.
- The user’s location is embedded into a Google Map iframe.
4. Watching Position (Real-Time Updates)
You can track the user’s movement using the watchPosition method.
Example 3: Real-Time Position Updates
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Real-Time Geolocation</title>
</head>
<body>
<h1>Track My Location</h1>
<button onclick="startTracking()">Start Tracking</button>
<button onclick="stopTracking()">Stop Tracking</button>
<p id="output">Press "Start Tracking" to track your location.</p>
<script>
let watchID;
function startTracking() {
if (navigator.geolocation) {
watchID = navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
document.getElementById('output').textContent =
`Latitude: ${latitude}, Longitude: ${longitude}`;
},
(error) => {
document.getElementById('output').textContent = `Error: ${error.message}`;
}
);
} else {
document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
}
}
function stopTracking() {
if (watchID) {
navigator.geolocation.clearWatch(watchID);
document.getElementById('output').textContent = "Tracking stopped.";
}
}
</script>
</body>
</html>
Explanation:
- watchPosition: Monitors the user’s location continuously.
- clearWatch: Stops the real-time tracking.
5. Handling Errors and Options
Example 4: Customizing Error Handling and Options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation with Options</title>
</head>
<body>
<h1>Customized Geolocation</h1>
<button onclick="getCustomLocation()">Get My Location</button>
<p id="output">Click the button to get your location.</p>
<script>
function getCustomLocation() {
const options = {
enableHighAccuracy: true, // Use GPS for high accuracy
timeout: 5000, // Wait up to 5 seconds
maximumAge: 0 // Do not use cached location
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude, accuracy } = position.coords;
document.getElementById('output').textContent =
`Latitude: ${latitude}, Longitude: ${longitude}, Accuracy: ${accuracy} meters`;
},
(error) => {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById('output').textContent = "Permission denied by the user.";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById('output').textContent = "Position unavailable.";
break;
case error.TIMEOUT:
document.getElementById('output').textContent = "Request timed out.";
break;
default:
document.getElementById('output').textContent = "An unknown error occurred.";
}
},
options
);
} else {
document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
}
}
</script>
</body>
</html>
Explanation:
- enableHighAccuracy: Requests more precise location data (e.g., GPS).
- timeout: Sets the maximum wait time for a location response.
- maximumAge: Specifies the age of cached data that is acceptable.
6. Practical Application: Find Nearby Services
You can combine Geolocation with APIs like Google Places or OpenStreetMap to find nearby services (e.g., restaurants, gas stations).
7. Best Practices
- Request Permission Respectfully:
- Explain why location data is needed to the user.
- Handle Errors Gracefully:
- Provide meaningful error messages.
- Minimize Accuracy Requests:
- Use high accuracy only when necessary, as it consumes more battery.
Conclusion
In this tutorial, you learned:
- How to use the Geolocation API to get the user’s location.
- How to track real-time movement.
- How to handle errors and customize location retrieval.
- How to display location on maps.
The HTML5 Geolocation API is a powerful tool for creating location-aware applications.