pset8 - addMarker and infowindow problem

Question

I am having trouble with addMarker in pset8. The markers are only shown one by one each time I pan or zoom in/out the view. And after 10 moves it keeps adding markers (limitation to 10 isn't working). Also when I click the marker it doesn't open the infoWindow. Can someone please help me? I have no clue what is wrong.

function addMarker(place) {

// extract the place latitude and longitude
var myLatLng = new google.maps.LatLng(place["latitude"], place["longitude"]);

// instantiate marker
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: place["place_name"] +", "+ place["admin_name1"],
    label: place["place_name"] +", "+ place["admin_name1"],
});

// get articles for place
$.getJSON(Flask.url_for("articles"), {geo: place.postal_code}, function(articles) {

    // Only display infowindow if articles exist
    if (!$.isEmptyObject(articles))
    {
        // start Unordered List
        var articlesContent = "<ul>";
        for (var i = 0; i < articles.length; i++)
        {
            //Each list item is stored into articlesString
            articlesContent += "<li><a target='_NEW' href='" + articles[i].link
            + "'>" + articles[i].title + "</a></li>";
        }
    }

    // close the unordered list of articles
    articlesContent += "</ul>";

    // listen for clicks on marker
    google.maps.event.addListener(marker, 'click', function() {
        showInfo(marker, articlesContent);
    });
});

// add marker to the map markers
markers.push(marker);
}

Answer 1

The script.js distro code has changed, and doesn't (seem to) match the Mashup specification, specifically in the search section. From the spec:

Notice that we’re using getJSON's "Promise" interface, per http://api.jquery.com/jquery.getjson/. Rather than pass an anonymous function directly to getJSON (to be called upon success), we’re instead "chaining" together calls to getJSON, done (whose argument, an anonymous function, will be called upon success), and fail (whose argument, another anonymous function, will be called upoon failure). See http://api.jquery.com/jquery.ajax/ for some additional details. And see https://davidwalsh.name/write-javascript-promises for an explanation of promises themselves.

A prior version of script.js had this script for search, which does use the promise interface:

function search(query, syncResults, asyncResults)
 {
     // get places matching query (asynchronously)
     var parameters = { 
         q: query
     };
     $.getJSON(Flask.url_for("search"), parameters)
     .done(function(data, textStatus, jqXHR) {

         // call typeahead's callback with search results (i.e., places)
         asyncResults(data);
     })
     .fail(function(jqXHR, textStatus, errorThrown) {

         // log error to browser's console
         console.log(errorThrown.toString());

         // call typeahead's callback with no results
         asyncResults([]);
     });

You want to use the done method so that it waits for the results. You can use this function as your guide. And of course the documentation.

Take one problem at a time so you can more easily determine what is a cause and what is an effect.