Question

Hi Stackoverflow people,

I am implementing the MarkerCluster function for google map markers. I am experiencing a problem, which seems very simple, but I have trouble to track it down.

The script gets a json string passed through a Django template. The displaying works fine, but the link of every marker is the same (last of the json list). But the code seems straight forward to me that with every iteration a new href would be created. Isn’t that correct?

When I run the script all links redirect to the last item in the json list. How can I fix that?

var data = {{ project_data|safe }};
var markers = [];
for (var i = 1; i < {{ len|safe }}; i++) {
    var dat = data[i];
    var latLng = new google.maps.LatLng(dat.lat, dat.lng);
    var marker = new google.maps.Marker({
        position: latLng,
        title: dat.name,
        });

    google.maps.event.addListener(marker, 'click', function() {
      window.location.href = "../projects/" + dat.link;  
    });

    markers.push(marker);
}

Thank you for your help & suggestions.

Answer 1

I think it’s variable scoping problem, just replace this

google.maps.event.addListener(marker, 'click', function() {
  window.location.href = "../projects/" + dat.link;  
});

with following

(function(dat) {
    google.maps.event.addListener(marker, 'click', function() {
        window.location.href = "../projects/" + dat.link;  
    });
})(dat);

Hope it’ll solve the problem.