<!DOCTYPE html>
<
html
>
<
title
>DOM Geolocation coordinates Property</
title
>
<
body
>
<
h1
style
=
"color: green"
>GeeksforGeeks</
h1
>
<
b
>DOM Geolocation coordinates Property</
b
>
<
p
>Click the button to get your coordinates.</
p
>
<
button
onclick
=
"getLocation()"
>Get Location</
button
>
<
p
class
=
"location"
></
p
>
<
script
>
let x = document.querySelector('.location');
function getLocation() {
/* Check if location support is available */
if (navigator.geolocation) {
/* Callback to the showPosition function */
navigator.geolocation.getCurrentPosition(
showPosition);
} else {
x.innerHTML = "Geolocation is not supported.";
}
}
function showPosition(position) {
/* Assign the Coordinates object to a variable */
let coordinatesObject = position.coords;
x.innerHTML =
"Accuracy: " +
/* Get the accuracy from the
Coordinates object */
coordinatesObject.accuracy +
"<
br
>Latitude: " +
/* Get the latitude from the
Coordinates object */
coordinatesObject.latitude +
"<
br
>Longitude: " +
/* Get the longitude from the
Coordinates object */
coordinatesObject.longitude +
"<
br
>Altitude: " +
/* Get the altitude from the
Coordinates object */
coordinatesObject.altitude +
"<
br
>Altitude Accuracy: " +
/* Get the altitude accuracy
from the Coordinates object */
coordinatesObject.altitudeAccuracy +
"<
br
>Speed: " +
/* Get the speed from
the Coordinates object */
coordinatesObject.speed +
"<
br
>Heading: " +
/* Get the heading from
the Coordinates object */
coordinatesObject.heading;
}
</
script
>
</
body
>
</
html
>