HTML5 Geoloaction

**locbtran** · 10-28-2012, 01:44 AM

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>

**traq** · 10-28-2012, 08:59 PM

The other person would need to choose to use your code (e.g., by using your website), which could then report their location to your server, and you could check it from there.

Note that there are serious privacy considerations that you need to take into account: you need to make clear to the other person(s) that your site wishes to track their location (and *not* track them until they explicitly give their consent).

**locbtran** · 10-29-2012, 08:36 AM

My final product would be to have a phone app that can track someone's location.
There are millions people out there, how do I track person X with my phone.
Does that person or I need to have a Google API key or something so we can be in sync with each other??

**traq** · 10-29-2012, 03:21 PM

Read the first sentence of my last post again.

**djr33** · 10-29-2012, 03:32 PM

I'm very confused about your questions here; why is this "HTML5"? Geolocation as far as I know is something done on the server (based on the IP address). One option is through Google. But there are other services as well. Are you specifically interested in Google Maps? If so, you should look into that specifically-- there are likely tutorials out there, and maybe a support forum.

**traq** · 10-29-2012, 08:33 PM

the geolocation API for javascript is actually its own spec, but is often grouped with html5. It can be based on IP address, but uses finer locating via wifi network/cell tower triangulation and GPS whenever available. It's mostly useful with mobile devices.

locbtran, geoloaction itself has nothing to do with google maps. It's all done on the user's device, which (if the user so chooses) shares that information with your app. If you want to know where someone is (more accurately, where their device is), you'd have to send that information to your server. At that point, you could access the info from wherever you happen to be. Then, if you wanted to, you could use that info to place a marker on google maps.

some things you might want to read:

dive into html5
html5 doctor

Thread: HTML5 Geoloaction

Thread Tools

Search Thread

HTML5 Geoloaction

Similar Threads

UTF-8 with HTML5

HTML5 Notepad script

Resolved HTML5 tags and CSS

HTML5 help

html5 video

Bookmarks

Bookmarks

Posting Permissions