Need help with pset8/mashup/scripts.js/add_marker

Question

I am done with mashup.db, apllication.py but seem to be stuck into add_marker. In so far as I have been able to write the code for instantiating a marker, adding labels and simple icons to it. For getting the info window news feed I am taking the help of $.getJSON method. Now as per the spec, when a marker is clicked, it should trigger the mashup’s info window to open, anchored at that same marker, the contents of which should be an unordered list of links to article for that article’s location (unless /articles outputs an empty array)! So, for this I think after calling the anonymous function in .done() method I will have to use the technique in show_info function in scripts.js which is:

/**
* Shows info window at marker with content.
*/
function showInfo(marker, content)
{
// start div
var div = "<div id='info'>";
if (typeof(content) == "undefined")
{
    // http://www.ajaxload.info/
    div += "<img alt='loading' src='/static/ajax-loader.gif'/>";
}
else
{
    div += content;
}

// end div
div += "</div>";

// set info window's content
info.setContent(div);

// open info window (if not already open)
info.open(map, marker);
}

Now, my code for add_Marker function:

/**
* Adds marker for place to map.
*/
function addMarker(place)
{
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
var image = 'http://maps.google.com/mapfiles/ms/micons/yellow.png';

var marker = new google.maps.Marker({
    position: place,
    map: map,
    icon: image,
    label: labels[labelIndex++ % labels.length]
});

markers.push(marker);

var parameter = {
    p: place
};
$.getJSON(Flask.url_for("articles"), parameter)
.done(function(data, textStatus, jqXHR) {
    var list = "<ul>";

    for(var i = 0; i < data.length; i++)
    {
        /* some code like 
            list += <li>
            list += "<a herf = "data[i].link">"
            list += data[i].title
            list += "</a>"
            list += "</li>" 
         */
    }

    list += "</ul>";

    info.setContent(list);

    marker.addListner('click', function() {
        info.open(map, marker);
    });
});
}

I don't know if the method I am thinking for getting list elements is correct or not and how to get the link from data inserted correctly in the a href tag. Plse do let me know if I have to add some code functionality in my add_Markers function. Any suggestions will be appreciated.

Answer 1

I think your way of creating the list is very clever. However, you should consider adding a .fail function for the getJSON() function just in case, and it would also be nice to see you add another click listener on the marker that adjusted the zoom of the map and centered it on the marker like: marker.addListener('click', function() { map.setZoom(8); map.setCenter(marker.getPosition()); }); Also, parameters should contain geo, not q, when querying articles.