CODEWITHSUNDEEP
androidjquerycordovagoogle-maps-api-3
user1809790
user1809790

Reputation: 1369

Distance Travelled

I am creating a Phonegap App (using jQuery and Google Maps API V3) related to travelling and would like to show the user the distance he/she has travelled since starting the app.

Is there any Google function for this? Or can anyone recommend what I can do to get the total distance travelled?

Upvotes: 1

Views: 1425

Answers (1)

Gajotres
Gajotres

Reputation: 57309

It can be done easily. You have to understand, by using a Google Maps API for jQuery you have all needed tools to do it by yourself.

First, you need to define a time period (lets say 1 minute). We will need it to create a reference point of our movements. Next step is to use phonegap/cordova geolocation API to calculate our position (latitude and longitude):

http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html

At this point choose do you want to:

  1. Store a position (latitude and longitude) every 1 minute in some js array
  2. Or do the same thing like in point 1 and also show it on the map with gmap addMarker ability.

At the end you need to calculate a distance. Loop through the position array and use latitude and longitude to calculate a distance between every available point. Here you will find function used for a such calculation (with a js example):

http://www.movable-type.co.uk/scripts/latlong.html

Or you can use Google Maps APi function:

google.maps.geometry.spherical.computeDistanceBetween (latLngA, latLngB);

EDIT:

Here's a working example for you: http://jsfiddle.net/Gajotres/6YpAG/

Code:

$(document).ready(function(){
    // Chicago
    var coordinateObject= new Object();
    coordinateObject.lat = '41.83682786072714';
    coordinateObject.lng = '-87.626953125';
    geoLocationHandler.addLocation(coordinateObject);
    // New York
    var coordinateObject= new Object();    
    coordinateObject.lat = '40.58058466412761';
    coordinateObject.lng = '-74.00390625';
    geoLocationHandler.addLocation(coordinateObject);
    // Toronto
    var coordinateObject= new Object();    
    coordinateObject.lat = '43.70759350405294';
    coordinateObject.lng = '-79.365234375';
    geoLocationHandler.addLocation(coordinateObject);

    var len = geoLocationHandler.arrLocations.length;
    for (var i = 0; i < len; i++) {
        if(i == 1){
            geoLocationHandler.distance += geoLocationHandler.calcDistance(geoLocationHandler.arrLocations[i-1].lat,geoLocationHandler.arrLocations[i-1].lng,geoLocationHandler.arrLocations[i].lat,geoLocationHandler.arrLocations[i].lng);
        }
    }

    alert(geoLocationHandler.distance);
});

var geoLocationHandler = {
    arrLocations : [],
    distance : 0,
    addLocation:function(obj){
        geoLocationHandler.arrLocations.push(obj);
    },
    calcDistance:function(fromLat, fromLng, toLat, toLng) {
        return google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(fromLat, fromLng), new google.maps.LatLng(toLat, toLng));
    }
};

Final result is a distance expressed in meters.

Every time you have a new coordination use this to create a new object and add it to the array:

var coordinateObject= new Object();
coordinateObject.lat = '41.83682786072714'; // Change with your latitude
coordinateObject.lng = '-87.626953125'; // Change with your longitude
geoLocationHandler.addLocation(coordinateObject);

Upvotes: 3

Related Questions