<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Do you know where your browsers are?</title>
<link rel="stylesheet" href="boilerplate.css">
<!-- The key must be generated per-domain from
http://code.google.com/apis/maps/signup.html -->
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAdKqUl5P5ngUsPujIZwvdLxT-kkuWzSk8krYKTTtCBWsRXId_rRTY8yt15zaUmCJYh3zpAZ07ywSc7g"
type="text/javascript"></script>
<script type="text/javascript">
/* Helper for writing messages. */
function message(text) {
var geo = document.getElementById('geo');
geo.innerHTML = text;
}
/* Where the action starts. Turn on the spinner and fire up the geolocator. */
function setup() {
/* Check the browser capabilities. */
if (navigator.geolocation) {
/* ajaxload.info FTW! */
var i = '<img src="spinner.gif" alt="Gratuitous spinner"></img>';
message(i + " Contacting skynet to determine your location...");
/* The hard part! */
/* Calling the geolocator with success and error callbacks. */
navigator.geolocation.getCurrentPosition(mapper, geo_error);
} else {
/* Marketing brownie points. */
message("Your browser doesn't support geolocation. Try " +
'<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">' +
"Firefox 3.5</a>. It's awesome.");
}
}
/* Called on geolocation success. Shows some location details and plots
* the latitude/longitude pair on a google map. */
function mapper(position) {
/* Coordinate-printing helper. */
function coord(num, up, down) {
var deg = Math.abs(Math.round(num * 100) / 100);
return deg + "° " + (num > 0 ? up : down);
}
/* Detail listing helper. */
function show(obj, keys) {
list = [];
for each (var k in keys) {
list.push('<dt>' + k + "</dt><dd>" + obj[k] + '</dd>');
}
return list.join('');
}
/* Basic details. */
var lat = coord(position.coords.latitude, 'N', 'S');
var lon = coord(position.coords.longitude, 'E', 'W');
message("Your position is " + lat + " " + lon + ".");
/* Too much detail. */
var details = '<dt>timestamp</dt><dd>' + (new Date(position.timestamp)) + '</dd>';
details += show(position.coords,
['latitude', 'longitude', 'accuracy', 'altitude',
'altitudeAccuracy', 'heading', 'speed']);
document.getElementById('details').innerHTML = details;
/* Shiny map. */
if (GBrowserIsCompatible()) {
var gmap = new GMap2(document.getElementById("map"));
var point = new GLatLng(position.coords.latitude,
position.coords.longitude);
gmap.setCenter(point, 15);
gmap.addOverlay(new GMarker(point));
gmap.setUIToDefault();
}
}
/* Boring error handler. */
function geo_error(e) {
if (e.code == e.UNKNOWN_ERROR)
message("Something went wrong. I don't know what I'm doing.");
else if (e.code == e.PERMISSION_DENIED)
message("Permission denied? Oh snap.");
else if (e.code == e.POSITION_UNAVAILABLE)
message("Couldn't figure out your position. You can't count on computers.");
else if (e.code == e.TIMEOUT)
message("Ran out of time. The tubes are clogged.");
}
</script>
<style type="text/css">
body {
background: #1d1d1d;
font-size: 85%;
font-family: Arial,Verdana,sans-serif;
}
#content {
width: 600px;
margin: auto;
padding: 1em;
background: #fff;
/* Bonus! Rounded corners and shadows. */
-moz-box-shadow: inset 0 0 1em;
-moz-border-radius: 1em;
}
#map {
width: 500px;
height: 300px;
margin: .1em 0 1em;
}
#details {
list-style-type: none;
}
</style>
</head>
<body onload="setup()" onunload="GUnload()">
<div id="content">
<div id="geo">
Can't see the demo? Get
<a href="http://www.mozilla.com/firefox/all-beta.html">Firefox 3.5</a>
</div>
<div id="map"></div>
<dl id="details"></dl>
</div>
</body>
</html>
) is private.
