Так?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
padding: 20px;
background-color: #ffffc9;
}
button {
margin: 0.5rem 0;
}
</style>
</head>
<body>
<p id="status"></p>
<a id="map-link" target="_blank"></a>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
const status = document.querySelector("#status");
const mapLink = document.querySelector("#map-link");
mapLink.href = "";
mapLink.textContent = "";
status.textContent = "Locating…";
fetch("//ip-api.com/json/?lang=en&fields=lat,lon").then(function (res) {
return res.json();
}).then(function(data) {
status.textContent = "";
mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
mapLink.textContent = `Latitude: ${data.lat} °, Longitude: ${data.lon} °`;
}).catch(function () {
status.textContent = "Unable to retrieve your location";
});
});
</script>
</body>
</html>