pset8 addMarker click event opens info window on wrong marker

Question

I am trying to finish my addMarker function for my pset8 and am having an difficult time getting the click event listener to work properly. I can get my Markers to add to the map, then when I click on a marker a info box will pop up, the problem is the info box will pop up at a random marker on the page, not the one I clicked on, the info box will show the proper info for the marker it came from, but I cannot get the info box to appear on the marker that I am clicking on and the on I wish for it to come from. I have no clue where the problem is coming from and have been chasing myself in circles for a few days now. Thank you for any help.

 function addMarker(place)
  {  
     // 42.8340....-78.6343
     var myLatlng = new google.maps.LatLng(place.latitude, place.longitude);

// TODO

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: place.place_name
  });

google.maps.event.addListener(marker, 'click', function() {
    showInfo(marker);
    $.getJSON("articles.php", {
        geo: place.postal_code
    })
    .done(function(data,textstatus,jqHXR)
    { 
       if (data.length === 0) 
        {
           showInfo(marker, "No News");
        }
        else
        {
            //   var link;
            //   var title;  
            //   link = data[0].link;
            //   title = data[0].title;
            var ul;
            ul = "<ul>"; 
            var template = _.template("<li><a href = '<%- link %>' target = '_blank'><%- title %> </a></li>");
            for (var i = 0; i < data.length ; i++)
                ul += template({
                link: data[i].link,
                title: data[i].title
                }); 
            ul += "</ul>";
            showInfo(marker, ul);
        }
    });
});

}

Answer 1

Man... you'll be so pissed off with this...

You should declare a NEW marker variable every time you call addMarker, but you don't do this here:

marker = new google.maps.Marker({......

When you do marker = ..., you're just overwriting one global marker over and over again.

This should be:

var marker = new google.maps.Marker({......

If this solves your problem, please click the check mark to accept the answer.