Несколько маркеров в Google Maps API v3, которые ссылаются на разные страницы при нажатии

Question

У меня есть карта с несколькими маркерами, которую я заполняю через массив. Каждый маркер кликабелен и должен выводить пользователя на отдельный URL для каждого маркера.

Проблема в том, что все маркеры, при отображении правильного заголовка, все используют URL последней записи в массиве.

Вот мой код:

var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
var map = new google.maps.Map(document.getElementById("bigmap"), myOptions);
setMarkers(map, properties);

var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
['213 Bennett Avenue',40.8574384,-73.9333426,'Mjkz'],
['50 Overlook Terrace',40.8543752,-73.9362542,'Mjky'],
['850 West 176 Street',40.8476012,-73.9417571,'OTM='],
['915 West End Avenue',40.8007478,-73.9692155,'Mjkx']];

function setMarkers(map, buildings) {
    var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
    var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
    var bounds = new google.maps.LatLngBounds;
    for (var i in buildings) {
        var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
        bounds.extend(myLatLng);
        var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
        google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
    }
    map.fitBounds(bounds);
}

Используя этот код, щелкнув любой маркер, пользователь перейдет к «detail? B = Mjkx»

Что я делаю не так?

Answer 1

Проблема в том, что ваш обработчик кликов использует переменную i из внешней функции.

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

Чтобы исправить это, напишите отдельную функцию для генерации обратного вызова.

Например:

function buildClickHandler(i) {
    return function() { window.location = ('detail?b=' + buildings[i][3]); };
}

for(var i = 0; i < buildings.length; i++) {
    //...
    google.maps.event.addListener(marker, 'click', buildClickHandler(i));
}

(Вам нужно определить buildClickHandler внутри setMarkers, чтобы он мог использовать параметр buildings)

Кстати, при циклическом просмотре массива не следует использовать for in loop , поскольку он также будет перебирать любые дополнительные члены объекта массива.