Loading Please Wait...
HTML Geolocation API is used to get graphical location of the user.
Location is most accurate in GPS like device such as mobile phones.
As the location of the user may compromise the privacy, so user must approve it otherwise it will not work.
To get user location, use getCurrentPosition() method of the navigator.geolocation object
The navigator object is used to get browser information such as appName, userAgent, etc. navigator.geolocation object consist of only location based information such as latitude, longitude, etc.
<button type="button" onClick="getLocation()">Get Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
alert('Geolocation is not supported by this browser.');
}
}
function successCallback(position) {
alert('Location fetched successfully.');
alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
console.log(position);
}
function errorCallback(error) {
alert('Failed to get location.');
console.log(error);
}
</script>
The navigator.geolocation check if geolocation is supported by browser or not.
The getCurrentPosition() method try to get the location. If location fetched then successCallback() method called otherwise errorCallback() method called.
When you click on "Get Location" button, a popup is displayed asking for user permissions.
When you click on "Block" or cross(x), the permission is denied and a log message is displayed in console. Inspect page and click on console tab.
When you click on "Allow", longitude and latitude is displaced via alert and a log message is displayed on console. Inspect page and click on console tab.
The getCurrentPosition() method provides the following data.
coords
Co-ordinates specific information
timestamp
The date/time when location is fetched.
The watchPosition() method continue fetch current (updated) location of the user as user moves.
The clearWatch() method stop watchPosition() method.
<button type="button" onClick="getLocation()">Get Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(successCallback, errorCallback);
} else {
alert('Geolocation is not supported by this browser.');
}
}
function successCallback(position) {
alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
}
function errorCallback(error) {
alert('Failed to get location.');
}
</script>
The optional parameter helps in fetching more accurate location.
<button type="button" onClick="getLocation()">Get Location</button>
<script>
const options = {
enableHighAccuracy: true,
timeout: 10000,
};
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
} else {
alert('Geolocation is not supported by this browser.');
}
}
function successCallback(position) {
alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
}
function errorCallback(error) {
alert('Failed to get location.');
}
</script>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved