HTML5 Geoloaction

JavaScript
1

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

<!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>
2

To monitor someone else with html5 geolocation you would need to have that person to keep your page with tracking code open. navigator.geolocation.watchPosition can be used to bind function which sends location data to server, on location change. Rest would be to implement data transfer from server to your monitoring page, which can be done using [URL=“http://www.w3.org/TR/websockets/”]websockets, to display data in real time.