Pset8: add marker, article links not clickable

Question

I got through most of the portions into showInfo and was able to have the titles display and I am even able to get an underline that looks like a link, however, they are not clickable.

Can someone tell me where I made my mistakes?

I suspect it might be at the $.getJSON portion of the code. I have even opened up the sample and made sure I use the target=blank. But still, not clickable.

Here's how it looks.

Below is the code:

function addMarker(place)
{
    // TODO     //E: to look at addMarker documentation provided in Pset8
    //Z: instantiate marker(look into google.maps.Marker)
    var myLatlng = new google.maps.LatLng(parseFloat(place.latitude), parseFloat(place.longitude));
    var marker = new google.maps.Marker({
    position: myLatlng,
    // title: place.place_name + ", " + place.admin_name1,     //<-- title key in this object, marker add a tool tip when mouse over. 
    label: place.place_name + ", " + place.admin_name1,
    icon: {
        url: 'https://maps.google.com/mapfiles/kml/pal2/icon31.png',
        labelOrigin: new google.maps.Point(11,40)
        // origin: new google.maps.Point(0,0),
        // anchor: new google.maps.Point(11,40)
    }
    //anchorPoint: new google.maps.MarkerOptions.Point(0,32) 

    });
    marker.setMap(map);
    //Z: listen for clicks on marker(look into google.maps.event.addListener)
    //E: Once click is recieved, get articles, remember markers so we can remove them later
    marker.addListener('click', function(){
        //Z: Get articles for place(Look into $.getJSON)
        var ulist = '<div id="articleList"><ul>';

        $.getJSON(Flask.url_for("articles"), {geo:place.postal_code})
        .done(function(data, textStatus, jqXHR) {
            //Z: build list of links to articles
            $.each(data, function(i,article){
                $('<li><a herf=' + article.link + ' target="_blank">' + article.title + '</a>'+'</li>').appendTo('#articleList');
                // <p><a href="/html/tutorial/html_links.cfm" target="_blank">Basic Link</a></p>
                //<p><a href="/html/codes/html_open_link_in_new_window.cfm" target="_blank">Open link in new window</a></p>
            });
            '</ul>';
        });
        showInfo(marker, ulist );

    });


    //Z: remember marker (to remove all markers from the map/delete them. look into google maps API)


}

Answer 1

Review the MDN doc on anchor tag and then verify that your add marker uses valid attributes. (Hint typo!). Perhaps clicking on the red do in the top right of the inspector will give more info. IMO close the "What's new" tab down below, since that is blocking the view of the console.