Question

I have an object that is formatted like this:

var telemetry_data = {

  T36: [
    //Date, lat, long
    [20120516, 25.40294163, -80.46972051],
    [20120518, 25.40306787, -80.46967025],
    [20120521, 25.40234592, -80.46980265]
  ],

  T43: [
    [20120523, -25.4076545, -80.46945134],
    [20120525, -25.40761155, -80.46756243]
  ]
};

This shows different animals’ (T##) locations on different dates. I want to place a marker on Google Maps showing the location of the animal at a specific date, as well as a polyline showing the path it followed to get there. I’m having trouble with the polyline part. Please see below. Everything seems to work up until path[tegu_name[j]].push(tegu_location);, where path[tegu_name[j]] looks like it gets overriden by only the last location, instead of the location being added to the array. For some animals (T23, T34, T35, T36), the arrays remain completely empty, despite there being correctly dated locations. Any ideas? I have a feeling I made some silly mistake, but I can’t figure it out.

Live: http://crocdoc.ifas.ufl.edu/projects/tegumap/ (Change the date to May 18th to run this part of the code through many locations and you can see the console printing objects with only one location [from line 776]. The current locations are the purple dots)

Full JS: http://crocdoc.ifas.ufl.edu/projects/tegumap/js/tegumap.js

//Telemetered tegus
var tegu_location;
var path = new Object();
var line = new Object();

//For each tegu
for (var j = 0; j < tegu_name.length; j++) {
    var tegu_key = telemetry_data[tegu_name[j]];
    //For each date
    for (var k = 0; k < tegu_key.length; k++) {
        path[tegu_name[j]] = new Array();
        if (tegu_key[k][0] <= date) {
            console.log("use point at date "+tegu_key[k][0]);
            tegu_location = new google.maps.LatLng(tegu_key[k][1], tegu_key[k][2]);
            path[tegu_name[j]].push(tegu_location);
        } else {
            marker = new google.maps.Marker({
              icon: point_tracked,
              shape: point_shape,
              map: map,
              position: tegu_location

            });
            marker_container.push(marker);

        } 
        console.log(path[tegu_name[j]]);
    }

    line[tegu_name[j]] = new google.maps.Polyline({
        path: path[tegu_name[j]],
        strokeColor: '#32cd32',
        strokeOpacity: 0.6,
        strokeWeight: 3
    });
    line[tegu_name[j]].setMap(map);


}

Answer 1

It looks like your path[tegu_name[j]] = ... line (755) should be outside the k loop, otherwise the array is created anew on each iteration of k.