I'm having a hard time figuring out why my function doesn't show the unordered list in the marker's info box but instead it does display "[object HTMLUListElement]".

console.log(list) confirms that list is actually a proper ul with the right article titles (no hyperlink set up yet) but I don't know what extra step I need to add in order to properly pass list to the showInfo function. Here is my code:

function addMarker(place)
    // get marker location  
    var latLng = new google.maps.LatLng(place.latitude, place.longitude);

    // instantiate marker
    var marker = new google.maps.Marker({
        position: latLng,
        label: place.place_name + ", " + place.admin_name1,
        map: map

    // get JSON with articles
    var query = "geo=" + place.postal_code;

    $.getJSON(Flask.url_for("articles"), query)
    .done(function(data, textStatus, jqXHR) {
        // Use DOM manipulation to create the list
        // create the list element
        var ulist = document.createElement('ul');

        for (var i = 0; i < data.length; i++) {
            // create the list item
            var item = document.createElement('li');

            // set the content

            // add it to the list

        google.maps.event.addListener(marker, "click", function() {
            showInfo(marker, ulist);
    .fail(function(jqXHR, textStatus, errorThrown) {

        // log the error


1 Answer 1


From showInfo in the spec:

Notice, though, how this function is creating a string of HTML dynamically

The "content" that is passed should be a string of HTML, not document elements.

You must log in to answer this question.

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