jasonclark/index-html5-geo.php

## index-html5-geo.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>re: This Place - Location Matters : Montana State University Libraries</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="MSU Libraries: Tools" href="http://feeds.feedburner.com/msulibrarySpotlightTools" />
<style type="text/css" media="screen, projection, handheld">
<!--
@import url("/~jason/files/geolocate/meta/styles/master.css");
-->
</style>
<script type="text/javascript" src="./meta/scripts/global.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body class="default" onload="initialize()">
<h1>re: This Place - Location Matters<span>: MSU Libraries</span><small>(working code and proof of concepts)</small></h1>
<div class="container">
    <ul id="tabs">
        <li id="tab1"><a href="./index.php">Demo App</a></li>
        <li id="tab2"><a href="./what.php">What is this?</a></li>
        <li id="tab3"><a href="./code.php">View Code</a></li>
    </ul><!-- end tabs unordered list -->
	<div class="main">
    <h2>Getting your location: <span id="status">checking...</span></h2>
    <div id="cantfindyou"></div>
    <div id="map" style="width:710px;height:350px;"></div>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <!-- fail nicely if the browser has no Javascript -->
    <noscript><strong>JavaScript must be enabled in order for you to use Google Maps.</strong> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again.</noscript>
<script type="text/javascript">
function $(id){
		return document.getElementById(id);
	}
	var trackerId = 0;
	var geocoder;
	var theUser = {};
	var map = {};
	function initialize() {
		geocoder = new google.maps.Geocoder();
		if (navigator.geolocation){
			var gps = navigator.geolocation;
			gps.getCurrentPosition(function(pos){

				var s = document.querySelector('#status');
				if (s.className == 'success') {
				// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
				return;
				}
				s.innerHTML = "found you!";
				s.className = 'success';

				var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
				var opts = {
					zoom: 7,
					center: latLng,
					mapTypeId: google.maps.MapTypeId.TERRAIN,
					mapTypeControl: true,
    				mapTypeControlOptions: {
      					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    				},
					navigationControl: true,
    				navigationControlOptions: {
      					style: google.maps.NavigationControlStyle.SMALL
    				}
				};
				map = new google.maps.Map($("map"), opts);
				theUser = new google.maps.Marker({
					position: latLng,
					map: map,
					title: "You are here."
				});
				showLocation(pos);
			});
			trackerId = gps.watchPosition(function(pos){
				var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
				map.setCenter(latLng);
				theUser.setPosition(latLng);
				showLocation(pos);
			});
		} else {
        	document.getElementById("cantfindyou").innerHTML = "Hmmm... I don't know. Good hiding!";
    	}
	}

	function showLocation(pos){
		var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
		var lat = pos.coords.latitude;
		var lng = pos.coords.longitude;
			document.getElementById("lat").value = lat;
			document.getElementById("lng").value = lng;
	    if (geocoder) {
	        geocoder.geocode({'latLng': latLng}, function(results, status) {
	          if (status == google.maps.GeocoderStatus.OK) {
	            if (results[1]) {
		            $("loc").innerHTML = results[1].formatted_address;
					document.getElementById("q").value = results[1].formatted_address.toLowerCase();
	            }
	          }
	        });
	      }
	}

	/*function stopTracking(){
		if (trackerId){
			navigator.geolocation.clearWatch(trackerId);
		}
	}*/
</script>
    <p>Do you want us to use the location of <strong><span id="loc"></span></strong> to find local interest items for you?</p>
	<form id="searchBox" method="get" action="./search.php">
	<fieldset>
	<label for="q">Search</label>
	<input type="hidden" name="lat" id="lat" value="" />
	<input type="hidden" name="lng" id="lng" value="" />
	<input type="text" maxlength="200" name="q" id="q" tabindex="1" value="" />
	<button type="submit" class="button">Search</button>
	</fieldset>
	</form>
	</div><!-- end div main -->
</div><!-- end container div -->
</body>
</html>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<title>re: This Place - Location Matters : Montana State University Libraries</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="alternate" type="application/rss+xml" title="MSU Libraries: Tools" href="http://feeds.feedburner.com/msulibrarySpotlightTools" />
	<style type="text/css" media="screen, projection, handheld">
	<!--
	@import url("/~jason/files/geolocate/meta/styles/master.css");
	-->
	</style>
	<script type="text/javascript" src="./meta/scripts/global.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</head>
	<body class="default" onload="initialize()">
	<h1>re: This Place - Location Matters<span>: MSU Libraries</span><small>(working code and proof of concepts)</small></h1>
	<div class="container">
	<ul id="tabs">
	<li id="tab1"><a href="./index.php">Demo App</a></li>
	<li id="tab2"><a href="./what.php">What is this?</a></li>
	<li id="tab3"><a href="./code.php">View Code</a></li>
	</ul><!-- end tabs unordered list -->
	<div class="main">
	<h2>Getting your location: <span id="status">checking...</span></h2>
	<div id="cantfindyou"></div>
	<div id="map" style="width:710px;height:350px;"></div>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<!-- fail nicely if the browser has no Javascript -->
	<noscript><strong>JavaScript must be enabled in order for you to use Google Maps.</strong> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again.</noscript>
	<script type="text/javascript">
	function $(id){
	return document.getElementById(id);
	}
	var trackerId = 0;
	var geocoder;
	var theUser = {};
	var map = {};
	function initialize() {
	geocoder = new google.maps.Geocoder();
	if (navigator.geolocation){
	var gps = navigator.geolocation;
	gps.getCurrentPosition(function(pos){

	var s = document.querySelector('#status');
	if (s.className == 'success') {
	// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
	return;
	}
	s.innerHTML = "found you!";
	s.className = 'success';

	var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
	var opts = {
	zoom: 7,
	center: latLng,
	mapTypeId: google.maps.MapTypeId.TERRAIN,
	mapTypeControl: true,
	mapTypeControlOptions: {
	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
	},
	navigationControl: true,
	navigationControlOptions: {
	style: google.maps.NavigationControlStyle.SMALL
	}
	};
	map = new google.maps.Map($("map"), opts);
	theUser = new google.maps.Marker({
	position: latLng,
	map: map,
	title: "You are here."
	});
	showLocation(pos);
	});
	trackerId = gps.watchPosition(function(pos){
	var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
	map.setCenter(latLng);
	theUser.setPosition(latLng);
	showLocation(pos);
	});
	} else {
	document.getElementById("cantfindyou").innerHTML = "Hmmm... I don't know. Good hiding!";
	}
	}

	function showLocation(pos){
	var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
	var lat = pos.coords.latitude;
	var lng = pos.coords.longitude;
	document.getElementById("lat").value = lat;
	document.getElementById("lng").value = lng;
	if (geocoder) {
	geocoder.geocode({'latLng': latLng}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	if (results[1]) {
	$("loc").innerHTML = results[1].formatted_address;
	document.getElementById("q").value = results[1].formatted_address.toLowerCase();
	}
	}
	});
	}
	}

	/*function stopTracking(){
	if (trackerId){
	navigator.geolocation.clearWatch(trackerId);
	}
	}*/
	</script>
	<p>Do you want us to use the location of <strong><span id="loc"></span></strong> to find local interest items for you?</p>
	<form id="searchBox" method="get" action="./search.php">
	<fieldset>
	<label for="q">Search</label>
	<input type="hidden" name="lat" id="lat" value="" />
	<input type="hidden" name="lng" id="lng" value="" />
	<input type="text" maxlength="200" name="q" id="q" tabindex="1" value="" />
	<button type="submit" class="button">Search</button>
	</fieldset>
	</form>
	</div><!-- end div main -->
	</div><!-- end container div -->
	</body>
	</html>