pset8 infowindow shows up only after click twice

Question

I have spent hours but still could not figure out why info-window would not show up on the first click. The correct info-window will show up only after the second click. Then for the rest of the info-windows, one click opens them. When I check the console log, after the first click, it always says that my news-content parammeter(var news in this case) is not defined. Then after the 2nd click, everything goes ok. If I give this parameter a specific text string, then it will show up on the first click.

Here is my code for the addMarker function and thank you very much for your help in advance!

function addMarker(place)
{
    // TODO
    var myLatlng={lat: parseFloat(place.latitude), lng:parseFloat(place.longitude)};
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

    var marker=new google.maps.Marker({
        draggable: true,
        //animation: google.maps.Animation.DROP,
        position: myLatlng,
        map: map,
        icon: image,
        label: place.place_name
    });

    markers.push(marker);

    marker.addListener('click', function() {
        var parameters = {geo: place.postal_code};
        $.getJSON("articles.php", parameters)
        .done(function(data, textStatus, jqXHR) {
            news="<div><ul>";
            if (data.length == 0){
                news="<h1>slow on news!</h1>";
            }
            else {
                for (var i=0; i<data.length; i++){
                    news += "<li><a href=\""+data[i].link+"\">"+data[i].title+"</a></li>";
                }
                news +="</ul>";
                //console.log(news);
                //console.log("test");
            }
        })
        .fail(function(jqXHR, textStatus, errorThrown) {

            // log error to browser's console
            console.log(errorThrown.toString());
        });
        //content="<h1>slow on news!</h1>";

        var infowindow = new google.maps.InfoWindow({
             content: news
        });
       infowindow.open(map, marker);


    });  
}

Answer 1

After discussing with my friends, we found the problem is due to the order of the code (although I am still not very clear why this old order would be buggy): instead of including getJSON function in the "click listener" function, the correct order should be getJSON first, then add the "click listener" to set the content of the infowindow and open it. Another bug I noticed is that instead of creating a new infoWindow variable here (which will create one window for each click), the correct method is to use the global variable that was defined at the beginning of the file, which will ensure that when you open another window, the previous infowindow will disappear (or more precisely, replaced by the current window).