loop over array of coordinates and calculate distance javascript

Question

I have a running app that tracks and records the runners location and it saves the coordinates into array, so far so good. i'm trying to loop over the array and calculate the distance traveled in total.

the code:

        var startPos;
        var num;
        var distance;

        navigator.geolocation.getCurrentPosition(function (position) {
            startPos = position;
        });
        //
        watchID = navigator.geolocation.watchPosition(function (position) {

        pathArr.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var latlng = new google.maps.LatLng(lat, lon);

        var num = calculateDistance(startPos.coords.latitude,startPos.coords.longitude,
        position.coords.latitude, position.coords.longitude);
        distance = num;
        },


        function (positionError) {
            $("#error").append("Error: " + positionError.message + "<br />");
        }, {
            enableHighAccuracy: true,
            timeout: 30 * 1000
        });


function calculateDistance(lat1, lon1, lat2, lon2) {
    var R = 6371; // km
    var dLat = (lat2 - lat1).toRad();
    var dLon = (lon2 - lon1).toRad();
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return d;
}

what i had realized is that the calculation only works properly if i walk a straight line cause it always goes from start till current and not one by one and if the runner will circle back to point zero the total will be 0 or close to 0, i need to change it in order to calculate the distance from coord to coord and add the total.

i tried this :

        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var latlng = new google.maps.LatLng(lat, lon);

            num += calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
            position.coords.latitude, position.coords.longitude);
            startPos = latlng;
            distance = num;

and no luck. please help

Answer 1

You need to iterate over all geographic coordinates in your array, and find the distance between each successive two coordinates, and add them to a sum of distance to find the total distance.

The relevant part of the simplified code is like this:

Given that coords hold the array of geographical coordinates,

for (var i = 0; i < coords.length - 1; i++) {
    distanceTotal += google.maps.geometry.spherical.computeDistanceBetween(coords[i], coords[i+1]);
}

Here's an example with the Google Maps API: http://jsfiddle.net/90kbnjqx/2/