Here is my code...
<!DOCTYPE html>
<html>
<head>
<title>Geeting User Location</title>
</head>
<body>
<button onclick="getLocation()">Click here to get your address</button><br><br>
<label>Address: </label>
<textarea cols="100" rows="5" id="demo"></textarea>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position){showPosition(position)}, null, {
maximumAge: 75000,
timeout: 30000,
enableHighAccuracy: true,
});
}
else
{
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position)
{
var locApi = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude+"&key=MY_API_KEY_HERE";
$.ajax({
url: locApi,
dataType: 'json',
type: 'GET',
success: function(data) {
console.log(data);
var address = data.city;
address += data.region;
address += data.country;
$("#demo").append(JSON.stringify(address));
},
error: function() {
$('#demo').html('<p>An error has occurred</p>');
},
});
}
</script>
Я хочу получить название города, региона, страны через значения широты и долготы и добавить его в текстовое поле, когда пользователь нажимает кнопку. Я хочу знать, в чем я ошибаюсь. Геолокация не дает правильные значения широты и долготы на локальном хосте.