Jquery, Add elements every 2 seconds

Question

I'm trying to create a growth map similar to http://projects.flowingdata.com/walmart/.

I am using https://github.com/marioestrada/jQuery-gMap to do the maping

What i've got so far is a button that when I click it I want to start the animation. The onclick code is:

<script>
    $("input.buttonB").click(function(){  
        window.setTimeout(function() {
            $('#map_canvas').gMap('addMarker', {
                latitude:   41.60252,
                longitude: -100.32855,
                content: 'Some HTML content'
                }
            );
        }, 2000);
        window.setTimeout(function() {
            $('#map_canvas').gMap('addMarker', {
                latitude:   11.60252,
                longitude: -110.32855,
                content: 'Some HTML content'
                }
            );
        }, 2000);        
    });
</script>

Problem is, the markers don't appear on screen every 2 seconds. The window waits 4 seconds then displays both of them at the same time.

Any suggestions?

Answer 1

Ideally, you should have something like this (untested):

var markerData = [{
    lat: "something",
    lng: "something",
    html: "something"},
{
    lat: "something",
    lng: "something",
    html: "something"
}];

function showNextMarker() {
    var current = markerData.shift();
    $('#map_canvas').gMap('addMarker', {
        latitude: current.lat,
        longitude: current.lng,
        content: current.html
    });
}

$("input.buttonB").click(function(){  
    var i = window.setInterval(function() {
        showNextMarker();
        if (markerData.length == 0) {
            i = window.clearInterval(i);
        };
    }, 2000);    
});