CS50 Pset8: Info Window Not Showing

Question

I have been working on addMarker() from scripts.js and was stuck at the second half of the prompt. My markers and labels are showing perfectly, however, the info windows are not popping up when I click on the markers. Any suggestion would be great, thanks in advance!

function addMarker(place)
{
    // assign markers
    var image = 'http://maps.google.com/mapfiles/ms/micons/ylw-pushpin.png';
    // https://developers.google.com/maps/documentation/javascript/markers#simple_icons
    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerLabel
    var marker = new google.maps.Marker({
        position: {lat: parseFloat(place.latitude), lng: parseFloat(place.longitude)},
        map: map,
        icon: image,
        label: {
            text: place.place_name + ', ' + place.admin_code1,
            color: 'blue',
            fontSize: '16px'
        }
    });

    // append marker to markers in order to delete all markers all at once through removeMarkers()
    markers += marker;

    var parameters = {
        geo: place.postal_code
    };
    $.getJSON(Flask.url_for("articles"), parameters)
    .done(function(data, textStatuts, jqXHR) {

        for (var i = 0; i < data.length; i++)
        {
            marker.addListener(map, "click", function() {
                showInfo(marker, data[i]);
                info.open(map, marker);
            });
        }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {

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

        showInfo([]);
    });

}

My code looks like this now:

    $.getJSON(Flask.url_for("articles"), parameters)
    .done(function(data, textStatuts, jqXHR) {

        // https://www.w3schools.com/js/js_loop_for.asp
        var infowindow_content = "<ul>";
        for (var i = 0; i < data.length; i++)
        {
            infowindow_content += "<li>" + "<a href='{data[i].link}'>" + data[i].title + "</a>" + "</li>";
        }
        infowindow_content += "</ul>";
        marker.addListener("click", function() {
           showInfo(marker, infowindow_content);
           info.open(map, marker);
        });

    })

Answer 1

One problem is this syntax markers += marker;. That does not add an element to an array in js. The array method push adds elements to an array.

Another problem is here marker.addListener(map, "click", function(). That's not the correct syntax to add a listener to a marker (extraneous argument). Review the api doc here.

Once you get those things sorted, you'll run into trouble here showInfo(marker, data[i]);. data[i] is local to the addMarker function, so when it calls the function from the click action, there is no data[i] (more specifically, there is no i, thus data[i] is undefined). You'll have to sort out what argument to send to showInfo.

Some hints for the content argument to showInfo:

From the spec (showInfo):

This function opens the info window at a particular marker with particular content (i.e., HTML).

From the spec (addMarker):

the contents of which should be an unordered list of links to article for that article’s location

Putting those two bits together, think about content as the HTML for an unordered list of links.