pset8 addMarker - unable to display contents of JSON inside info window

Question

I'm struggling with this part of Pset8. I've written the code to add markers to my map, and to create an info window that opens when I click the marker. I can get a string of content into the window by hard-coding a string. I'm also confident that my articles() method in application.py is working - when I visit https://ide50-username.cs50.io/articles?geo=02138 (with my username inserted into the URL) I see an array of article titles and links.

However I'm unable to dynamically insert the contents of articles into the window. Instead I simply see a very small empty info window open, as per the screenshot below. My code is below, based on the examples given by google at: https://developers.google.com/maps/documentation/javascript/infowindows

function addMarker(place)
{
    var content = '';
    var query = place.postal_code;
    var parameters = {
        geo: query
    };

    $.getJSON(Flask.url_for("articles"), parameters).done(function(articles, textStatus, jqXHR) {
    // build list of links to articles
        contentString +='<ul>';
        for (var i=0; i < articles.length; i++)
        {
            content +='<li> + articles[i].title + </li>';
        }
        content += '</ul>';
    })
    .fail(function(jqHXHR, textStatus, errorThrown){
        // log error to console
        console.log(errorThrown.toString());
    });

    var LatLng = {lat: place.latitude, lng: place.longitude};
    var marker = new google.maps.Marker({
    position: LatLng,
    map: map,
    });

    var infowindow = new google.maps.InfoWindow({
        content: content
    });

    marker.addListener('click', function() {
          infowindow.open(map, marker);
    });
}

I know there are lots of similar questions here, but I haven't been able to use them to work out what I need to do!

Thank you so much in advance for your help.

Matt

Answer 1

OK, I worked it out - I hadn't fully reviewed /understood what the showInfo() method [later in scripts.js] is doing.

In fact, we have already defined var info as instantiating a new google maps infowindow right at the top of the file; and then showInfo() defines the infowindow.open() method - so my code was repeating this, and therefore breaking.

Anyway, the last two lines of methods [var infowindow = ...; and marker.addListener(...] can be deleted and replaced by:

    marker.addListener('click', function() {
      showInfo(marker, content);

Hope that's useful to someone else.