CS50 PSet8 Mashup - Markers don't show on Google map

Question

I'm working on my CS50 Mashup problem set. application.py is working fine, I've checked the outputs of /articles and /search, all shows up like it should.

But something in scripts.js doesn't work. I've implemented addMarker() and removeMarkers() based on the Google Maps docs, but the markers just do not show up on the map. Stuff's solution website works all fine, when I move/drag the map it renders some amount of markers in the nearby locations. But when I do the same on my map, it stays empty.

function addMarker(place)
{
var myLatLng = {lat: place.latitude, lng: place.longitude};

var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    size: new google.maps.Size(20, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
};

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: place["place_name"] +", "+ place["admin_name1"],
    label: place["place_name"] +", "+ place["admin_name1"],
    icon: image
});

// get articles for place
$.getJSON(Flask.url_for("articles"), {geo: place["postal_code"]}, function(articles)
{
    if (!$.isEmptyObject(articles))
    {
        // Construct the HTML list of articles
        var articles_list = "<ul>";
        for (var i = 0; i < articles.length; i++)
        {
            articles_list += "<li><a href='" + articles[i].link + "'>" + articles[i].title + "</a></li>";
        }
        articles_list += "</ul>";
    }

    // listen for clicks on marker
    google.maps.event.addListener(marker, 'click', function()
    {
        showInfo(marker, articles_list);
    });
});

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

Answer 1

All right, figured it all out. Posting it here in an answer if anyone else will be looking for this problem.

function addMarker(place)
{
var myLatLng = {lat: place.latitude, lng: place.longitude};

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.setMap(map);

// get articles for place
$.getJSON("/articles", {geo: place.postal_code}, function(articles)
{
    // Construct the HTML list of articles
    var articles_list = "<ul>";
    for (var i = 0; i < articles.length; i++)
    {
        articles_list += "<li><a href='" + articles[i].link + "'>" + articles[i].title + "</a></li>";
    }
    articles_list += "</ul>";

    // listen for clicks on marker
    marker.addListener("click", function()
    {
        showInfo(marker, articles_list);
    });
});

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