gmaps.js - adding a click function for each marker

Question

I'm using the Gmaps.js api in a little project I'm building and struggling with adding click events within a for loop. Here's the code:

for(var i = 0; i < number; i++) {
        var entryTime = data[i].datetime;
        map.addMarker({
            lat: data[i].lat,
            lng: data[i].lng,
            click: function(){
                alert(entryTime);
            }
        });
}

However, when clicking the markers I always get the last data element. How can I bind this function to each marker?

Community · Accepted Answer · 2017-05-23 11:49:25Z

1

This is the expected behavior. The entryTime variable is defined and changed outside the click handler; and when the click handler is fired it will alert the last value assigned to entryTime.

One solution is to create a closure in order to create a copy of variables and their values at the time the closure was created.

for (var i = 0; i < number; i++) {
    map.addMarker({
        lat: data[i].lat,
        lng: data[i].lng,
        click: (function (t) {
            return function () {
                alert(t);
            };
        })(data[i].datetime)
    });
}

The details are explained in this question.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Apr 26, 2014 at 19:28

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

gmaps.js - adding a click function for each marker

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related