Reputation: 2231
I want to create a map using Google Maps API, and connect a number of markers to individual event listeners.
My JS file looks like this (abbreviated):
var MainObject = (function($) {
return {
init: function() {
this.set_up_map();
},
set_up_map: function() {
//...
var map = new google.maps.Map(map_div, map_props);
function add_click_events(row_id) {
$(row_id).addClass('highlight');
}
function draw_rows(rows) {
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var row_latlng = new google.maps.LatLng(
row.lat,
row.long);
var marker = new google.maps.Marker(
{
position: row_latlng,
map: map,
});
google.maps.event.addListener(marker,
"click",
function() {add_click_events(row);}
);
}
}
// call data
draw_rows(rows);
}
})(jQuery);
I would like to have it iterate over the markers and connect each to its callback (having an individual row_id that should get highlighted). But with the structure above I overwrite all the event listeners with the last (so only the last row is highlighted no matter which marker is clicked).
What is a good way of debugging or even solving this?
Upvotes: 0
Views: 488
Reputation: 1370
You should use function closure for that.
function draw_rows(rows) {
for (var i = 0; i < rows.length; i++) {
(function(row){
var row_latlng = new google.maps.LatLng(
row.lat,
row.long);
var marker = new google.maps.Marker(
{
position: row_latlng,
map: map,
});
google.maps.event.addListener(marker,
"click",
function() {add_click_events(row);}
);
})(rows[i]);
}
}
Also you can use let
, but it is supported only in newest browsers
let row = rows[i];
Upvotes: 3
Reputation: 15164
you need to use a closure:-
(function(i) {
var row = rows[i];
var row_latlng = new google.maps.LatLng(
row.lat,
row.long);
var marker = new google.maps.Marker({
position: row_latlng,
map: map,
});
google.maps.event.addListener(marker,
"click",
function() {
add_click_events(row);
}
);
})(i);
Upvotes: 2