HTML GeoLocation

HTML 5 Geolocation API (Application Programming Interface) is a browser API that gets your device's geographic coordinates (Latitude and Longitude). Thus it assists in detecting the user's geolocation or user on a website or a mobile app. Now let's find out how to get your geolocation using the interface's methods.

How to get your Geolocation?

First, you need to check if your browser supports the geolocation property. So here’s the code to find your current geolocation with a click of a button.

index.html

<!DOCTYPE html>

<html>

<body>

<p>Click the button below to get your coordinates:</p>

<button onclick = 'getLocation()'>Get Location Details</button>

var ele = document.getElementById('demo');

function getLocation() {

//check if your browser supports the geolocation property

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} else {

ele.innerHTML = 'Your Browser does not support Geolocation';

}

function showPosition(geopos) {

ele.innerHTML = 'Latitude: ' + geopos.coords.latitude + ' <br> Longitude: ' + geopos.coords.longitude;

}

</script>

</body>

</html>

Explanation of the above code:

The code first checks if the user's browser supports the geolocation;
If it supports, it calls the getCurrentPosition method by passing the callback function as an argument. If not, the code displays an error message to the user;
In a successful scenario, the callback function displays the latitude and longitude of your current location.

Handling Errors and Rejections in Geolocation API

Getting users' geolocation can be complicated, as there could be circumstances where the API cannot locate the precise location or timeout issues. So, in such cases, the code needs to catch and display them in a user-friendly manner. Let's find out how.

As you already know, the getCurrentPosition() has one parameter: the callback function to display the results. There is also another optional parameter which is the callback function, to handle the errors. Here is a code example:

index.html

<!DOCTYPE html>

<html>

<body>

<p>Click the button below to get your coordinates:</p>

<button onclick = 'getLocation()'>Get Location Details</button>

var ele = document.getElementById('demo');

function getLocation() {

//check if your browser supports the geolocation property

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, displayError);

} else {

ele.innerHTML = 'Your Browser does not support Geolocation';

}

function showPosition(geopos) {

ele.innerHTML = 'Latitude: ' + geopos.coords.latitude + ' <br> Longitude: ' + geopos.coords.longitude;

}

function displayError(errorObj) {

switch (errorObj.code) {

case 0:

x.innerHTML = 'Failed to retrieve the location of the device due to an unknown error.'

break;

case 1:

x.innerHTML = 'The method failed to retrieve the device'

's location because the application did not have permission.'

break;

case 2:

x.innerHTML = 'The location of the device can not be determined'

break;

case 3:

x.innerHTML = 'The request to get user location timed out..'

break;

}

</script>

</body>

</html>

The other methods of Geolocation API to Look out for

watchPosition() - returns the user's current position and continues to return the updated position as the user doesn't remain stationary(similar to how you use a GPS in a car);
clearWatch() - clears the watchPosition() method.

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 1

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione