W3C has introduced geolocation API in html5. We can use this API to get geographic location of client side device using javascript. Location of device determined by various sources like GPS, wifi network, Bluetooth mac address, GSM/CDMA cell IDs etc. In this article i will explain how to use this API.
List of Geolocation API capable browsers
- Internet Explorer 9+
- Firefox 3.5+
- Chrome
- Safari 5+
- Opera 10.6+
Code to get Geolocation
window.onload=function(){ if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } function showPosition(pos){ alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude); }
The getCurrentPosition() Method Returns Following Data
Property | Description |
---|---|
coords.latitude | The latitude as a decimal number |
coords.longitude | The longitude as a decimal number |
coords.accuracy | The accuracy of position |
coords.altitude | The altitude in meters above the mean sea level |
coords.altitudeAccuracy | The altitude accuracy of position |
coords.heading | The heading as degrees clockwise from North |
coords.speed | The speed in meters per second |
timestamp | The date/time of the response |
Error handling
The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user’s location
window.onload=function(){ if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else { alert("Geolocation is not supported by this browser."); } } function showPosition(pos){ alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("User denied the request for Geolocation.") break; case error.POSITION_UNAVAILABLE: alert("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; } }
.watchPosition() Method
This method Returns the current position of the user and continues to return updated position as the user moves.
window.onload=function(){ if(navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } function showPosition(pos){ alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude); }
.clearWatch() Method
This method clears even created by .watchPosition() Method
var watchID; window.onload=function(){ if(navigator.geolocation) { watchID=navigator.geolocation.watchPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } function showPosition(pos){ alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude); } //call this function to stop location updates function stopWatch(){ navigator.geolocation.clearWatch(watchID); }