Can't get articles on my marker, and city markers are persisting

Question

function addMarker(place)
{
    // Create marker
    var marker = new google.maps.Marker({
        position: {lat: place.latitude, lng: place.longitude},
        map: map,
        title: place["place_name"] +", "+ place["admin_name1"],
        label: place["place_name"] +", "+ place["admin_name1"],
        icon : 'http://maps.google.com/mapfiles/marker.png',
        labelAnchor: new google.maps.Point(27, 60)
    });

    // Get articles for location, add by listening on click
    $.getJSON(Flask.url_for("articles"), {geo: place.postal_code}, function(articles) {
        if (!$.isEmptyObject(articles))
        {
            var articlelist= "<ul>";
            for (var i = 0; i < articles.length; i++)
            {
                articlelist+= "<li><a target='_NEW' href='" + articles[i].link
                + "'>" + articles[i].title + "</a></li>";
            }
        }
        articlelist+= "</ul>";

        google.maps.event.addListener(marker, 'click', function() {
            showInfo(marker, articlelist);
        });
    });

    // add marker
    markers.push(marker);
}

So I've tried everything to get this code to work. My article function is working (tested as suggested by CS50 pset page). I've been having problems with this as well as remove marker, and if anyone could help me that would be great, because I've been at this for a couple of days and am extremely frustrated. Cities are persisting even after I move to other locations, and I can't change this from happening. I am a novice coder who was doing fine before PSET7, but 7 and 8 have been nightmares. Thanks.

function removeMarkers()
{
    // remove all markers from the map
    for (var i = 0, n = markers.length; i < n; i++)
    {
        markers[i].setMap(null);
    }
}

Answer 1

So I haven't moved on to the remove marker situation but provided the rest of your code works, I think I was able to solve your problem.

Using the information from: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

I was able to construct this code which would always pop up a window with the information provided:

// Add marker for place to map
function addMarker(place)
{
   // Sourced from:
   // (https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple)

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

   var ontentString = '<div id="content">'+
     '<div id="siteNotice">'+
     '</div>'+
     '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
     '<div id="bodyContent">'+
     '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
     'sandstone rock formation in the southern part of the '+
     'Northern Territory, central Australia. It lies 335&#160;km
(208&#160;mi) '+
     'south west of the nearest large town, Alice Springs; 450&#160;km '+
     '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
     'features of the Uluru - Kata Tjuta National Park. Uluru is '+
     'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
     'Aboriginal people of the area. It has many springs, waterholes, '+
     'rock caves and ancient paintings. Uluru is listed as a World '+
     'Heritage Site.</p>'+
     '<p>Attribution: Uluru, <a
href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
     'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
     '(last visited June 22, 2009).</p>'+
     '</div>'+
     '</div>';

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

   var marker = new google.maps.Marker({
       position: myLatLng,
       map: map,
       title: place["place_name"] +", "+ place["admin_name1"],
       label: place["place_name"] +", "+ place["admin_name1"]
   });
   marker.addListener('click', function() {
   infowindow.open(map, marker);
   });
}

I then moved the marker to above the source since most of the other questions about this pset that I ran into seemed to have that as constant, to create the marker first then add the data.

Every time I tried to use getJSON in my program it would wipe all the markers off my map so I went searching for answers. I ran into your question and saw that some of my formatting and usage for JSON was off so I fixed it. At first it didn't work, but as I continued to search most people also had the Flask.url_for("articles") as the url, but I ran into this reddit post that used "/articles" for the url for getJSON and it seemed to work. So my final code ended up looking like:

function addMarker(place)
{
    // Sourced from:
    // (https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple)

    // Set marker place
    var myLatLng = new google.maps.LatLng(place["latitude"], place["longitude"]);

    // Create 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"]
    });

    // Sourced from and solved:
    // (https://cs50.stackexchange.com/questions/28726/cant-get-articles-on-my-marker-and-city-markers-are-persisting)
    // (https://www.reddit.com/r/cs50/comments/8523js/struggling_a_lot_with_pset_8_specifically_getjson/)
    $.getJSON(("/articles"), {geo: place.postal_code}, function(articles) {
        if (!$.isEmptyObject(articles))
        {
            contentString= "<ul>";
            for (var i = 0; i < articles.length; i++)
            {
                contentString+= "<li><a target='_NEW' href='" + articles[i].link + "'>" + articles[i].title + "</a></li>";
            }
        }
        contentString+= "</ul>";
    });

    // Allow marker to be clicked
    marker.addListener('click', function() {
    // Pass info into info window
    showInfo(marker, contentString);
    });

    // Source (How to add to an array):
    // (https://www.w3schools.com/jsref/jsref_push.asp)
    markers.push(marker);

}

It worked for me so it seems like the problem you were having was how the url was defined for the getJSON function. Now I don't know if there is an issue with how you call the marker listener or the infoWindow but I'm sure you will find out.