SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2011
    Location
    Kolding, Denmark
    Posts
    108
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 websockets, to display data in real time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •