I'm trying to get the longitude and latitude into the URL. So far I came across many different topics on the internet - but nothing is working. I posting here the html which displays the problem.
output after clicking the button "Show Position" is showing your position and changing the URL in browser with that longitude and latitude
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function showPosition() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
const gotoURL = new URL(window.location.href);
gotoURL.searchParams.set('longitude', longitude);
gotoURL.searchParams.set('latitude', latitude);
window.location.href = gotoURL;
});
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
</script>
</head>
<body>
<div id="result">
<!--Position information will be inserted here-->
<!--Position information will be inserted here-->
</div>
<button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>
const uri = `http://177.0.0.6:5001/?lng=${longitude}&lat=${lattitude}`;Oh! You don't have a variable called lattitude.
You can make this easier for yourself by destructuring the properties from the coords object...
const { latitude, longitude } = position.coords;
...and use those in the template string. And save a bit of code having to repeat things.
So your code might look like this instead.
const result = document.getElementById('result');
const lat = document.getElementById('lat');
const lng = document.getElementById('lng');
navigator.geolocation.getCurrentPosition(function(position) {
const { latitude, longitude } = position.coords;
const positionInfo = `Your current position is Latitude: ${latitude}, Longitude: ${longitude}`;
result.textContext = positionInfo;
lat.textContent = latitude;
lng.textContent = longitude;
const uri = `http://177.0.0.6:5001/?lng=${longitude}&lng=${latitude}`;
});There's quiet a few things wrong here... but let's try and get them sorted for you...
Elements don't exist. I'm guessing they previously existed before you posted this on SO. As posted above, they cause Javascript to break.
var long = (document.getElementById('longi').innerHTML = position.coords.longitude);
var lat = (document.getElementById('latti').innerHTML = position.coords.latitude);
You're setting a bunch of (debug?) text and THEN (attempting to) change the URL. If everything works correctly, you'll not see the text, or you'll see it momentarily.
var positionInfo = ...
When you try and change the location, the variables you're trying to use (longitude and lattitude) don't exist. This is because variables declared inside a function only exist in that function (scope). You can either declare the variables before the callback function, or you can set the window location inside the callback function (this is what I'd recommend).
window.location.href = "http://177.0.0.6:5001/?' + longitude + '' + lattitude + '";
It's also notable that you're creating the new URL in a weird way, without the search parameters having names - You'd end up with something like 'http://177.0.0.5:5001?23.398208973.89383 - Maybe this is what you're after, but I doubt it.
The easiest way to get it working is remove the line starting with 'window.location.href' and replace the first two lines I mentioned with the following
const gotoURL = new URL(window.location.href);
gotoURL.searchParams.set('longitude', longitude);
gotoURL.searchParams.set('latitude', latitude);
window.location.href = gotoURL;
This takes advantage of the browser's URL builder to make it a little easier to create URLs.
Good luck, and I wish you all the best! ~JD