2

I have been working on addMarker() from scripts.js and was stuck at the second half of the prompt. My markers and labels are showing perfectly, however, the info windows are not popping up when I click on the markers. Any suggestion would be great, thanks in advance!

function addMarker(place)
{
    // assign markers
    var image = 'http://maps.google.com/mapfiles/ms/micons/ylw-pushpin.png';
    // https://developers.google.com/maps/documentation/javascript/markers#simple_icons
    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerLabel
    var marker = new google.maps.Marker({
        position: {lat: parseFloat(place.latitude), lng: parseFloat(place.longitude)},
        map: map,
        icon: image,
        label: {
            text: place.place_name + ', ' + place.admin_code1,
            color: 'blue',
            fontSize: '16px'
        }
    });

    // append marker to markers in order to delete all markers all at once through removeMarkers()
    markers += marker;

    var parameters = {
        geo: place.postal_code
    };
    $.getJSON(Flask.url_for("articles"), parameters)
    .done(function(data, textStatuts, jqXHR) {

        for (var i = 0; i < data.length; i++)
        {
            marker.addListener(map, "click", function() {
                showInfo(marker, data[i]);
                info.open(map, marker);
            });
        }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {

        // log error to browser's console
        console.log(errorThrown.toString());

        showInfo([]);
    });

}

My code looks like this now:

    $.getJSON(Flask.url_for("articles"), parameters)
    .done(function(data, textStatuts, jqXHR) {

        // https://www.w3schools.com/js/js_loop_for.asp
        var infowindow_content = "<ul>";
        for (var i = 0; i < data.length; i++)
        {
            infowindow_content += "<li>" + "<a href='{data[i].link}'>" + data[i].title + "</a>" + "</li>";
        }
        infowindow_content += "</ul>";
        marker.addListener("click", function() {
           showInfo(marker, infowindow_content);
           info.open(map, marker);
        });

    })
1
  • I apologize if it is a stupid question but I don't understand these two lines. Could anyone explain it to me? infowindow_content += "<li>" + "<a href='{data[i].link}'>" + data[i].title + "</a>" + "</li>"; and infowindow_content += "</ul>"; Thank you very much! Aug 26 '17 at 8:10
2

One problem is this syntax markers += marker;. That does not add an element to an array in js. The array method push adds elements to an array.

Another problem is here marker.addListener(map, "click", function(). That's not the correct syntax to add a listener to a marker (extraneous argument). Review the api doc here.

Once you get those things sorted, you'll run into trouble here showInfo(marker, data[i]);. data[i] is local to the addMarker function, so when it calls the function from the click action, there is no data[i] (more specifically, there is no i, thus data[i] is undefined). You'll have to sort out what argument to send to showInfo.

Some hints for the content argument to showInfo:

From the spec (showInfo):

This function opens the info window at a particular marker with particular content (i.e., HTML).

From the spec (addMarker):

the contents of which should be an unordered list of links to article for that article’s location

Putting those two bits together, think about content as the HTML for an unordered list of links.

9
  • I revised the first syntactic error by replacing markers += marker; with markers = markers.push('marker');. Is this the right way? I then corrected the second one by simply crossing out map, Is this the right way? At first I thought that map, is needed by making reference to link. Finally, why is data[i] not local to the click action? Can you give more instructions with respect to what argument to send to showInfo? Thanks a lot!! @Dino
    – Alex Chan
    Jun 2 '17 at 5:31
  • Have added hints for showInfo to the answer. You'll know if the changes you made are right if they work! Re: the link, read the comment again; the listener fires when the map is clicked. Jun 2 '17 at 12:16
  • I think I figured out what to pass into showInfo() @Dino, but the issues now became the following two: (1) the info window only shows up on the first marker I click on -- when I click on the second, third, and so forth markers, nothing pops up; and (2) how do I create hyperlinks that display the article titles? "<a href='data[i].link'>data[i].title</a>" does not work, regardless of whether those single quotation markers are there or not. Please help, thanks!
    – Alex Chan
    Jun 3 '17 at 22:32
  • Please refer to above for my latest code @Dino, thanks again!
    – Alex Chan
    Jun 3 '17 at 22:42
  • Problem with '{data[i].link}' is the { }. That is flask notation, not js. When I run the "latest code" snippet, I do not get the problem you describe with "missing" info windows. Jun 5 '17 at 1:21

You must log in to answer this question.

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