Маркеры Google Map, ссылающиеся на ту же страницу

Question

Я пытаюсь создать карту Google, в которой каждый маркер привязывается к другой странице (используя Ruby on Rails, API Карт Google 3). Мой код для маркеров:

var mapSpots = [ 
    <% @spots.each do |spot| %> 
    ['<%= spot.name %>', <%= spot.lat %>, <%= spot.lng %>, '<%= spot_path(spot) %>'], 
    <% end %> 
]; 

for (var i = 0; i < mapSpots.length; i++) { 
    var mapSpot = mapSpots[i]; 
    var marker = new google.maps.Marker({ 
    position: {lat: mapSpot[1], lng: mapSpot[2]}, 
    map: map, 
    icon: image, 
    title: mapSpot[0] 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    window.location.href = mapSpot[3]; 
    }); 
} 

Маркеры создаются для каждой записи в модели «Spot». Проблема в том, что маркеры все ссылаются на страницу одинаково на странице - как ни странно, чтобы определить с id: 2 (у меня в настоящее время есть 3 записи пятна). Любые мысли о том, как обеспечить, чтобы каждый маркер привязывался к соответствующему пути пути?

Возможно, встроенный рубин - это не лучший способ сделать это?

Answer 1

var mapSpots = [ 
    <% @spots.each do |spot| %> 
    ['<%= spot.name %>', <%= spot.lat %>, <%= spot.lng %>, '<%= spot_path(spot) %>'], 
    <% end %> 
]; 

for (var i = 0; i < mapSpots.length; i++) { 
    (function(n) { 
    var mapSpot = mapSpots[n]; 
    var marker = new google.maps.Marker({ 
     position: {lat: mapSpot[1], lng: mapSpot[2]}, 
     map: map, 
     icon: image, 
     title: mapSpot[0] 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     window.location.href = mapSpot[3]; 
    }); 
    })(i); 
} 

Я думаю, что это самая распространенная ошибка среди разработчиков javascript. При создании обратного вызова, как это:

google.maps.event.addListener(marker, 'click', function() { 
    window.location.href = mapSpot[3]; 
}); 

Вы на самом деле создать замыкание, которое держит ссылку на переменную mapSpot и все ваши функции обратного вызова держать ссылку на ту же самую переменную mapSpot. Поскольку вы изменяете эту переменную в каждой итерации цикла, после последней итерации это значение будет значением последнего маркера.

В начале цикла вы добавили var mapSpot, но он не создает новую переменную в каждой итерации цикла. В javascript нет области цикла, а только области функций. Ваше определение mapSpot фактически выведено за пределы цикла. Это больше похоже на это:

var mapSpot;

for (var i = 0; i < mapSpots.length; i++) { 
    mapSpot = mapSpots[i]; 
    ...