Real time GPS Tracker on JUST HTML / JS and Google Maps to be run on a handphone? Is it possible? Real time GPS Tracker on JUST HTML / JS and Google Maps to be run on a handphone? Is it possible? javascript javascript

Real time GPS Tracker on JUST HTML / JS and Google Maps to be run on a handphone? Is it possible?


Yes, it is possible. Most browsers in the latest smartphones have implemented the W3C Geolocation API:

The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.

The API is designed to enable both "one-shot" position requests and repeated position updates, as well as the ability to explicitly query the cached positions.

Using the Geolocation API to plot a point on Google Maps, will look something like this:

if (navigator.geolocation) {   navigator.geolocation.getCurrentPosition(function(position) {      var point = new google.maps.LatLng(position.coords.latitude,                                        position.coords.longitude);    // Initialize the Google Maps API v3    var map = new google.maps.Map(document.getElementById('map'), {       zoom: 15,      center: point,      mapTypeId: google.maps.MapTypeId.ROADMAP    });    // Place a marker    new google.maps.Marker({      position: point,      map: map    });  }); } else {  alert('W3C Geolocation API is not available');} 

The above will only gather the position once, and will not auto update when you start moving. To handle that, you would need to keep a reference to your marker, periodically call the getCurrentPosition() method, and move the marker to the new coordinates. The code might look something like this:

// Initialize the Google Maps API v3var map = new google.maps.Map(document.getElementById('map'), {  zoom: 15,  mapTypeId: google.maps.MapTypeId.ROADMAP});var marker = null;function autoUpdate() {  navigator.geolocation.getCurrentPosition(function(position) {      var newPoint = new google.maps.LatLng(position.coords.latitude,                                           position.coords.longitude);    if (marker) {      // Marker already created - Move it      marker.setPosition(newPoint);    }    else {      // Marker does not exist - Create it      marker = new google.maps.Marker({        position: newPoint,        map: map      });    }    // Center the map on the new position    map.setCenter(newPoint);  });   // Call the autoUpdate() function every 5 seconds  setTimeout(autoUpdate, 5000);}autoUpdate();

Now if by tracking you mean that you should also store this information on a server (so that someone else could see you moving from a remote location), then you'd have to send the points to a server-side script using AJAX.

In addition, make sure that the Google Maps API Terms of Use allow this usage, before you engage in such a project.


UPDATE: The W3C Geolocation API exposes a watchPosition() method that can be used instead of the setTimeout() mechanism we used in the above example.