<div>Latitude: <span id="lat"></span></div>
<div>Longitude: <span id="lon"></span></div>
<div>
<button id="currPos">Get Current Position</button>
</div>
<div id="error"></div>
body {
margin: 0;
padding: 15px;
color: #222;
font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
div {margin-bottom: 10px;}
button {
background-color: #3da4ab;
border: none;
color: #fff;
padding: 10px;
font-size: 1.05rem;
border-radius: 2px;
cursor: pointer;
}
button:hover {
background-color: #0e9aa7;
}
$(document).ready(() => {
$("#currPos").on("click", getLocation);
function getLocation() {
$.getJSON("https://ipinfo.io/", onLocationGot);
}
function onLocationGot(info) {
let position = info.loc.split(",");
$("#lat").text(position[0]);
$("#lon").text(position[1]);
}
});
This Pen doesn't use any external CSS resources.