More than 10 markers show up for mashup

Question

I so far have managed to complete the bulk of pset8. However, when compared to the staff's solution, I have more than 10 markers on the map at any one time. Why is this so? Here is my code from script.js. Thanks

function addMarker(place)
{
//gets coordinates of the place
var coordinates = {lat: (place["latitude"]), lng: (place["longitude"])};
//instantiates a marker
var marker = new google.maps.Marker({
    position: coordinates,
    map: map
})
//get the geo of the place 
geo = {geo: place["postal_code"]};
//get the articles associated with the place
$.getJSON(Flask.url_for("articles"), geo)
    .done(function(data, textStatus, jqXHR) {
        //iterate through the data and get the relevant information
        //create element for unordered list 
        var links = document.createElement('ul');
        for (i = 0; i < data.length; i++)
        {
            //create item element and the link
            var item = document.createElement('li');
            //create html tag <a>
            var a = document.createElement('a');
            //create text node 
            var title = document.createTextNode(data[i].title);
            //insert hyperlink into a
            a.setAttribute('href', data[i].link)
            //append text to a
            a.appendChild(title);
            //set item's value
            item.appendChild(a);
            //append item to the list
            links.appendChild(item);

        }
        //add listener for the click event 
        google.maps.event.addListener(marker, 'click', function() {
            showInfo(marker,links.innerHTML);
        });


    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        //log error to browser's console
        console.log(errorThrown.toString());
        //return undefined content to the showInfo function
        var content = undefined;
        //call show info with no content which will cause the gif to appear
        oogle.maps.event.addListener(marker, 'click', function() {
            showInfo(marker,content);
        });
    })


//add marker to the list
markers.push(marker)
}

removeMarker function

function removeMarkers()
{
//removes all markers from app by accessing the markers array
for (var key in markers)
{
    markers[key].setMap(null);
    markers.splice(key, 1);
}
}

Answer 1

You should not (cannot?) change the number of items in a list in an iterator. Let's say list = [0,1,2,3,4]. The first iteration "pops" off (splice) the first element. So the second iteration, is working with list = [1,2,3,4] and "pops" the second element, which leaves list = [1,3,4]. &tc. You can use the for (var key in markers) notation, but you cannot markers.splice(key, 1); in the for loop.

Answer 2

it may due to the implementation of your removeMarker() function. Use this instead:

for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = [];

I dont know why but the for x in y loop doesnt work in this case. The last line empties the array.