Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 Geolocation in Safari 5
HTML5 Geolocation API lets you share your location with your favorite web sites. A JavaScript can capture your latitude and longitude, can be sent to backend web server, and do fancy location-aware things like finding local businesses or showing your location on a map.
How Geolocation Works
The Geolocation API uses navigator.geolocation to access device location. It requires user permission and works through GPS, WiFi, or IP-based positioning.
Basic Syntax
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
Example: Getting Current Position
Here's how to get the user's current location:
<!DOCTYPE HTML>
<html>
<head>
<script>
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " 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)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="getLocation();" value="Get Location"/>
</form>
</body>
</html>
Position Object Properties
The position object contains several useful properties:
<script>
function showAllLocationData(position) {
var coords = position.coords;
var info = "Latitude: " + coords.latitude + "<br>";
info += "Longitude: " + coords.longitude + "<br>";
info += "Accuracy: " + coords.accuracy + " meters<br>";
info += "Altitude: " + coords.altitude + "<br>";
info += "Speed: " + coords.speed;
alert(info);
}
navigator.geolocation.getCurrentPosition(showAllLocationData);
</script>
Error Codes
| Error Code | Constant | Description |
|---|---|---|
| 1 | PERMISSION_DENIED | User denied location access |
| 2 | POSITION_UNAVAILABLE | Location information unavailable |
| 3 | TIMEOUT | Request timeout exceeded |
Options Parameter
You can configure geolocation requests with options:
var options = {
enableHighAccuracy: true, // Use GPS if available
timeout: 10000, // 10 second timeout
maximumAge: 300000 // Accept 5-minute old cached position
};
navigator.geolocation.getCurrentPosition(success, error, options);
Safari 5 Compatibility
Safari 5 supports HTML5 Geolocation API with these considerations:
- Requires HTTPS for secure contexts
- User must explicitly grant permission
- Works on both desktop and mobile Safari
Conclusion
HTML5 Geolocation API provides easy access to user location data with proper permission handling. Always include error handling and provide fallbacks for unsupported browsers.
1K+ Views
