0

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. enter image description here 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

0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .