Geolocation API - Get position
HTML
<!doctype html>
<html>
<head>
<title>Geolocation KI API</title>
</head>
<body>
<header>
<h1>Geolocation KI API PART - 2</h1>
</header>
<article>
<button id="btnPosition">Get Position</button>
<ul id="result"></ul>
</article>
</body>
</html>
CSS
body {
font-family: "Verdana";
font-size: 9pt;
}
header {
padding: 15px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
background-color: rgb(27, 161, 226);
color: #fff;
}
header h1 {
font-size: 14pt;
}
article {
width: 80%;
margin: auto;
margin-top: 20px;
}
article button{
padding: 5px;
}
article ul{
list-style: none;
}
article ul li{
padding: 5px;
}
JavaScript
function log(msg) {
var result = document.getElementById("result");
result.innerHTML += "<li>" + msg + "</li>";
}
window.onload = function() {
if (navigator.geolocation) {
var btnPosition = document.getElementById("btnPosition");
btnPosition.addEventListener("click", function() {
navigator.geolocation.getCurrentPosition(function(data) {
var coordinates = data.coords;
console.log(coordinates);
log("Accuracy: " + coordinates.accuracy);
log("Altitude: " + coordinates.altitude);
log("Altitude Accuracy: " + coordinates.altitudeAccuracy);
log("Heading: " + coordinates.heading);
log("Latitude: " + coordinates.latitude);
log("Longitude: " + coordinates.longitude);
log("Speed: " + coordinates.speed);
}, function(error) {
var code = error.code;
switch(code){
case 0:
log("Error: Unknown error");
break;
case 1:
log("Error: Permission denied");
break;
case 2:
log("Error: Position unavailable");
break;
case 3:
log("Error: Time out!");
}
});
});
}
};