HTML5 Geoloaction

HTML5 GeoLocation

I know there's an app for this but I would like to learn how to do this.
When I upload my code onto the server it can find where I am in realtime with geolocatin.
But if I would like to monitor someone using the geolocation, how would I go about doing ths??
Do you need to download a Google API or something??

So if I am currently at location A and personXY is at location B. If I was to look at my monitor, how do I see personXY on google map in realtime.
Any tips or advice would be greatly appreciated.

Here's my code, that only monitors myself

Code:

<!DOCTYPE html> <HTML> <HEAD> <TITLE></TITLE> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var TIMEOUT = 300000; var MAX_AGE = 1000; var HIGH_ACC = true; var ZOOM = 10; var watchID; var map; var mapMarker; window.onload = function (){ if (navigator.geolocation) { watchID = navigator.geolocation.watchPosition(show_map, errorCheck, { maximumAge: MAX_AGE, timeout: TIMEOUT, enableHighAccuracy: HIGH_ACC }); }else { alert("Oops, Geolocation Not Supported."); } } function stopWatch(){ if (watchID) { navigator.geolocation.clearWatch (watchID); } watchID = null; } function errorCheck(error){ switch(error.code){ case error.TIMEOUT: alert("Geolocation Timeout"); break; case error.POSITION_UNAVAILABLE: alert("Geolocation Position Unavailable"); break; case error.PERMISSION_DENIED: alert("Geolocation Permission Denied"); break; default: alert("Geolocation Error Code: " + error.code); } } function show_map(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var latlng = new google.maps.LatLng(lat, lon); if(map) { map.panTo(latlng); mapMarker.setPosition(latlng); } else { var myOptions = { zoom: ZOOM, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); mapMarker = new google.maps.Marker({ position: latlng, title:"You are here.", clickable: true }); mapMarker.setMap(map); } } </script> </HEAD> <BODY> <div id="map_canvas"></div> </BODY> </HTML>