jbalogh/gist:105157

## gistfile1.htm
<!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 + "&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>
	<!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>