Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A small, single-page tool for getting your current geolocation.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>
var isTouchDevice = 'ontouchstart' in document.documentElement;
window.onload = function () {
var where = document.getElementById('where');
var coordinates = document.getElementById('coordinates');
where.addEventListener(isTouchDevice ? 'touchstart' : 'click', function (event) {
event.preventDefault();
where.setAttribute('disabled', '');
window.navigator.geolocation.getCurrentPosition(function (position) {
coordinates.innerHTML = coordinates.innerHTML + "(" + position.coords.latitude + ", " + position.coords.longitude + ")\n";
where.removeAttribute('disabled');
});
});
};
</script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
<style>
body {
padding: 1em;
}
pre, button {
display: block;
width: 100%;
-webkit-appearance: none;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 100%;
margin-bottom: 0.5em;
border: none;
box-sizing: border-box;
border-radius: 3px;
padding: 0.5em;
}
pre {
background: #efefef;
height: 20em;
overflow: auto;
}
button {
background-color: #adadad;
color: white;
padding: 0.5em;
}
button[disabled] {
background-color: #efefef;
}
</style>
</head>
<body>
<pre id="coordinates"></pre>
<button id="where">Where am I?</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment