Question

I am working on a Google Map here: http://crocdoc.ifas.ufl.edu/projects/chameleonmapdev/

I have the data for the markers set up in this format:

var nights = ['July1211', 'July1411'];
var waypoint_data = {
    July1211: [
        //Lat, long, j/a (juvenile/adult)
        [25.429363, -80.508326, j],
        [25.429332, -80.508216, j]
    ],

    July1411: [
        [25.42936, -80.51023, j], 
        [25.42936, -80.51036, j]

    ]
};

And the function that builds the points looks like this:

function buildPoints() {
    //var marker_container = new Object;

        for ( i = 0; i < nights.length ; i++ ) {

            //Loop for each data point that night
            for ( h = 0; h < waypoint_data[nights[i]].length; h++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(waypoint_data[nights[i]][h][0], waypoint_data[nights[i]][h][1]),
                    icon: waypoint_data[nights[i]][h][2],
                    shape: pointshape,
                    map: map
                });

                //Push waypoints into date-specific object key
                //marker_container[nights[i]].push(marker);

            }

        }

    }   

I would like to push the markers for each date (night[i]) into a different object key so that I can hide/show a specific night’s markers. I’ve tried doing this with the two marker_container lines I’ve commented out, but they just break my loop, and in Firebug, I get an error about marker_container[nights[i]] being undefined. nights[i] is a string, so I thought this syntax would work. Any hints are greatly appreciated, and I’m very open to suggestions for other, better ways to code this.

Answer 1

You can’t use push on an Object, only on array. I think this is what you want to do:

function buildPoints() {
    var marker_container = new Object();

        for ( i = 0; i < nights.length ; i++ ) {
            marker_container[nights[i]] = new Array();

            //Loop for each data point that night
            for ( h = 0; h < waypoint_data[nights[i]].length; h++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(waypoint_data[nights[i]][h][0], waypoint_data[nights[i]][h][1]),
                    icon: waypoint_data[nights[i]][h][2],
                    shape: pointshape,
                    map: map
                });

                //Push waypoints into date-specific object key
                marker_container[nights[i]].push(marker);

            }

        }

    }   

simple proof of concept jsfiddle