Skip to content

Instantly share code, notes, and snippets.

@tomac4t
Created March 31, 2024 13:47
Show Gist options
  • Save tomac4t/292d21acb3b80c7cbf9d9acae31fd0cc to your computer and use it in GitHub Desktop.
Save tomac4t/292d21acb3b80c7cbf9d9acae31fd0cc to your computer and use it in GitHub Desktop.
generated by google gemini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Locate Me</title>
</head>
<body>
<button id="find-me">Locate</button>
<p id="status"></p>
<p>Longitude: <span id="lng"></span></p>
<p>Latitude: <span id="lat"></span></p>
<p>Address: <span id="address"></span></p>
<script>
function geoFindMe() {
const status = document.querySelector("#status");
const lngSpan = document.querySelector("#lng");
const latSpan = document.querySelector("#lat");
const addressSpan = document.querySelector("#address");
function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
status.textContent = "";
lngSpan.textContent = longitude;
latSpan.textContent = latitude;
// Use Openstreetmap API to get address information
const endpoint = `https://nominatim.openstreetmap.org/reverse.php?lat=${latitude}&lon=${longitude}&zoom=18&format=jsonv2`;
fetch(endpoint)
.then((response) => response.json())
.then((data) => {
addressSpan.textContent = data.display_name;
})
.catch((error) => {
console.error(error);
});
}
function error() {
status.textContent = "Unable to get your location";
}
if (!navigator.geolocation) {
status.textContent = "Your browser does not support geolocation";
} else {
status.textContent = "Locating...";
navigator.geolocation.getCurrentPosition(success, error);
}
}
document.querySelector("#find-me").addEventListener("click", geoFindMe);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment