0

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. enter image description here

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)


}
Improve this question
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.

Improve this answer
  • The site provided by CS50[pset8.cs50.net/] has the same issue scripts.js:182 Uncaught TypeError: event.cancelBubble is not a function at HTMLDocument.<anonymous> (scripts.js:182) (anonymous) @ scripts.js:182 in the console error message. :/ Hmm.. – nvs0000 Jul 18 '17 at 15:22
  • 1
    Cancel bubble isn't the problem. This $('<li><a herf=' is wrong. – DinoCoderSaurus Jul 18 '17 at 15:23
  • Oh my goodness. Thank you DinoCoderSaurus! i messed up the href. I typed herf instead of href. Gosh, i feel dumb. Thanks so much!! – nvs0000 Jul 18 '17 at 17:29

You must log in to answer this question.

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