Skip to main content

Real time GPS Tracker on JUST HTML / JS and Google Maps to be run on a mobile phone

Most browsers in the latest smart phones have implemented the W3C Geo location:
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 v3
var 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. 
 

Comments

Unknown said…
complete good information provide your blog rfid gps tracking

Your blog is really very interesting information regarding real estate.

Bhartiya City Nikoo Homes
Mantri Serenity
Anonymous said…
Nice blog..! I really loved reading through this article. Thanks for sharing such an amazing post with us and keep blogging...Well written article Thank You for Sharing with Us | project management training in chennai | project management certification online | project management course online |
ibtdubai said…
I like the topic which has been discuss by you,i want to say thanks to you for sharing informative info. Alternatively specially create a great blog for CompIT.

IT Support Services Dubai
Madhan kumar said…
Hey, Wow all the posts are very informative for the people who visit this site. Good work! We also have a Website. Please feel free to visit our site. Thank you for sharing.
Be Your Own Boss! If you're looking for a change in your work prospects, then let's prepare for your career from here!!!
Self Employment | Women Development | Information Technology | Engineering Courses