geoloqi/gist:436142

## gistfile1.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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
		var last = {lat: 45.5, lng: -122.6};

		var map;
		var latlng = new google.maps.LatLng(last.lat, last.lng);
		var myOptions = {
			zoom: 14,
			center: latlng,
			disableDefaultUI: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		var users = ["loqi"];
		var markers = {};
		var last_positions = {};
		var auto_zoom = 1;

		$(function(){
			$("#map_canvas").css("height", window.innerHeight+"px").css("width", window.innerWidth+"px");

		    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

			for(var i in users){
				// figure out how to get the user's image here
				var image = 'http://example.com/img/' + users[i] + '.png';
				var myLatLng = new google.maps.LatLng(45.5, -122.6);
				markers[users[i]] = new google.maps.Marker({
					position: myLatLng,
					map: map,
					icon: image
				});
				update_location(users[i]);
			}

			// I set one setinterval for each user, this could probably be done in a loop
			setInterval(function(){
				update_location("loqi");
			}, 1000*60*1);
		});

		function update_location(user){
			$.getJSON("http://example.com/"+user+".json?callback=?", function(json){
				var myLatLng = new google.maps.LatLng(json.data.location.position.latitude, json.data.location.position.longitude);

				if (typeof last_positions[user] != "undefined" && auto_zoom == 1) {
					if(!last_positions[user].equals(myLatLng)){
						map.panTo(myLatLng);
					}
				}

				last_positions[user] = myLatLng;
				markers[user].setPosition(myLatLng);
			});
		}

	</script>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}
	</style>
</head>
<body>
	<div id="map_canvas" style="width: 100%; height: 900px;"></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">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	var last = {lat: 45.5, lng: -122.6};

	var map;
	var latlng = new google.maps.LatLng(last.lat, last.lng);
	var myOptions = {
	zoom: 14,
	center: latlng,
	disableDefaultUI: true,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var users = ["loqi"];
	var markers = {};
	var last_positions = {};
	var auto_zoom = 1;

	$(function(){
	$("#map_canvas").css("height", window.innerHeight+"px").css("width", window.innerWidth+"px");

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	for(var i in users){
	// figure out how to get the user's image here
	var image = 'http://example.com/img/' + users[i] + '.png';
	var myLatLng = new google.maps.LatLng(45.5, -122.6);
	markers[users[i]] = new google.maps.Marker({
	position: myLatLng,
	map: map,
	icon: image
	});
	update_location(users[i]);
	}

	// I set one setinterval for each user, this could probably be done in a loop
	setInterval(function(){
	update_location("loqi");
	}, 1000601);
	});

	function update_location(user){
	$.getJSON("http://example.com/"+user+".json?callback=?", function(json){
	var myLatLng = new google.maps.LatLng(json.data.location.position.latitude, json.data.location.position.longitude);

	if (typeof last_positions[user] != "undefined" && auto_zoom == 1) {
	if(!last_positions[user].equals(myLatLng)){
	map.panTo(myLatLng);
	}
	}

	last_positions[user] = myLatLng;
	markers[user].setPosition(myLatLng);
	});
	}

	</script>
	<style type="text/css">
	body {
	padding: 0;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<div id="map_canvas" style="width: 100%; height: 900px;"></div>
	</body>
	</html>