As Zamyla's walk though explains, I want to display the articles as a set of links and titles so the user can easily see which articles to choose. I'm having trouble implementing the appropriate syntax (and possibly logic) to create the list. I've searched through a number of posts in SE to try to piece together the solution, and here are a few I found most helpful for reference:

https://stackoverflow.com/questions/975050/passing-javascript-variable-to-a-href https://stackoverflow.com/questions/10490473/jsonjavascript-jquery-how-to-import-data-from-a-json-file-and-parse-it https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript https://stackoverflow.com/questions/19614970/how-to-create-list-from-json-array

I found the chrome inspect tabs Console and Sources quite helpful in identifying errors, but lately it has been telling me there is a problem with the first console.log statement, so I'm at a bit of a dead end as to why there would be an error there of all places, and what is actually wrong with the function since the infowindow will pop up but with nothing in it.

Here is my addMarker function:

function addMarker(place)
// ***Note for this function do not need to iterate over places and such, this just adds one marker
// and the rest is handled in the update function 

// instantiate the marker
myLatlng = new google.maps.LatLng(place.latitude, place.longitude);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    labelContent: place.name,
    labelAnchor: myLatlng

// actually create the marker on the map

var coordinates = {
    geo: place.postal_code

$.getJSON(Flask.url_for("articles"), coordinates)
.done(function(data, textStatus, jqXHR) {

    var articleList = $("<ul></ul>");

    if (data.length != 0) {            
        for (i = 0; i < data.length; i++) {
            // probably wrong - attempt to create link and title as list element
            articleList.append('<li>' + '<a href = "' + data[i].link + '>' + data[i].title + '</a>' + '<li>');
            //articleList.append($("<li></li>").text('<a href ="' + data[i].link '">' + data[i].title + '</a>');

        // probably wrong

        // create a new info
        var infowindow = new google.maps.InfoWindow({
            content: articleList

        // when the user clicks open the infowindow
        marker.addListener("click", function(event) {
            infowindow.open(map, marker);



    else {
        console.log("pusblished! (empty)");
.fail(function(jqXHR, textStatus, errorThrown) {

    // log error to browser's console

// similar to python3's .append
  • When I run this code (in Firefox or Chrome), console shows InvalidValueError: setContent: not a string; and [object Object]. articleList is neither a string nor a DOM element as specified in the InfoWindow constructor. Commented Jul 13, 2017 at 13:33
  • Really? Well I changed my code around since then either way, so now I create the list differently. It sort of works now, but still has some problems. I may end up answering this question myself or deleting it, maybe it wasn't a good question to start with... Commented Jul 13, 2017 at 18:59

1 Answer 1


One way to do this is to model it after the showInfo function in scripts.js. See that it creates a div bit by bit, using concatination with html elements in quotes, while leaving data to be put into the html without quotes. Thus I could create a simple ordered list like so:

list = "<ul>";
list += "<li>" + "article1" + "<li>";
list += "</ul>";

Remember that $.getJSON will presumably return an array of JSON objects each of which will have a title and a link which can be retrieved as usual using the dot operator on any object such as .title or .link.

You must log in to answer this question.

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