<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
#timeout {
width: 300px;
height: 30px;
margin: 10px;
font-size: 20px;
}
</
style
>
<
script
>
// Success function
function successFunction(value) {
var lat = value.coords.latitude;
var long = value.coords.longitude;
document.getElementById('error')
.innerHTML = "";
document.getElementById('latitude')
.innerHTML = `Latitude: ${lat}`;
document.getElementById('longitude')
.innerHTML = `Latitude: ${long}`;
}
// Error Function
function errorFunction(err) {
document.getElementById('latitude')
.innerHTML = "";
document.getElementById('longitude')
.innerHTML = "";
document.getElementById('error')
.innerHTML = `Error occurred: ${err.message}`;
}
// Main function to get location
function getLocation() {
const timeOut = document
.getElementById('timeout').value;
const options = {
timeout: timeOut == "" ? 5000 : timeOut
}
navigator
.geolocation
.getCurrentPosition(
successFunction, errorFunction, options
);
}
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color : green"
>GeeksforGeeks</
h1
>
<
div
>
<
input
id
=
"timeout"
type
=
"number"
placeholder
=
"Enter the timeout in milliseconds"
>
<
br
/>
<
button
onclick
=
"getLocation()"
>
Get Location
</
button
>
<
h2
id
=
"latitude"
></
h2
>
<
h2
id
=
"longitude"
></
h2
>
<
h2
id
=
"error"
></
h2
>
</
div
>
</
center
>
</
body
>
</
html
>