JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id='log'></textarea>
CSS
textarea {
height: 300px;
width: 98%;
}
JavaScript
var previous_location;
function appendLocation() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function (location) {
document.getElementById('log').value += "lat:" + location.coords.latitude + " lon:" + location.coords.longitude + "(accuracy: " + location.coords.accuracy + "m)\n";
if (previous_location) {
if (previous_location.coords.latitude != location.coords.latitude || previous_location.coords.longitude != location.coords.longitude) {
console.log('Checking in 3 seconds to see if the location has stablized...');
previous_location = location;
setTimeout(appendLocation, 3000);
} else {
previous_location = location;
}
} else {
console.log('Double check just to be sure...');
previous_location = location;
setTimeout(appendLocation, 3000);
}
})
}
}
appendLocation();
jQuery(document).ready(function($) {
alert("Your location is: " + geoplugin_countryName() + ", " + geoplugin_region() + ", " + geoplugin_city());
});