Массив маркеров со ссылкой на каждый маркер в Google Earth

Question

Следующий код не перенаправляет пользователя, когда он нажимает на определенный маркер Google Планета Земля. Все остальное работает отлично. Есть указатели?

JavaScript:

$(function() {
    var latArray = ($("#google_map_section").attr("data-lat")).split(", ");
    var longArray = ($("#google_map_section").attr("data-long")).split(", ");
    var nameArray = ($("#google_map_section").attr("data-name")).split(", ");
    var urlArray = ($("#google_map_section").attr("data-url")).split(", ");
    var mylatlngs = [];
    var markers = [];
    var counter = 0;
    var bounds = new google.maps.LatLngBounds();

    while(counter < latArray.length){
       mylatlngs.push(new google.maps.LatLng(
           parseFloat(latArray[counter]),
           parseFloat(longArray[counter]))
        );
        counter++
    };
    var myOptions = {
        zoom: 12,
        center: mylatlngs[mylatlngs.length-1],
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("google_map_section"),
        myOptions
    );
    counter = 0;
    while (counter < mylatlngs.length){
        markers.push(new google.maps.Marker({
            position: mylatlngs[counter], 
            map: map,
            title: nameArray[counter],
            url: urlArray[counter]
        }));
        bounds.extend(mylatlngs[counter]);
        counter++
    };
    counter = 0;
    while (counter < markers.length){
        google.maps.event.addListener(markers[counter], 'click', function() {
            window.location.href = this[counter].url;
        });
        counter++
    };
    map.fitBounds(bounds);
  });

Источник HTML-страницы:

<div id="google_map_section" data-url="http://localhost:3000/impacts/12, http://localhost:3000/events/9, http://localhost:3000/impacts/10, http://localhost:3000/events/7" data-name="Dead fish!, Oil spill, Acid River Pollution, AMD Seepage" data-lat="-34.0, -34.0333333, -33.638271, -33.724289" data-long="17.0, 18.35, 18.990891, 18.95591"></div>

Обновление:

Firebug выдает следующее предупреждение внутри функции event.addListener: "Uncaught TypeError: Невозможно прочитать свойство 'url' из неопределенного"

Дальнейшее обновление:

Хорошо, проблема в присвоении URL в этой строке:

url: urlArray[counter]

Теперь это интересно, если я назначу элемент массива непосредственно EventListener следующим образом:

google.maps.event.addListener(markers[counter], 'click', function() {
    window.location.href = urlArray[counter];
});

это все еще не работает, но жесткое кодирование URL делает! Итак, это:

google.maps.event.addListener(markers[counter], 'click', function() {
    window.location.href = 'http://www.google.com';
});

работает! Что за черт?

Answer 1

Aha! Понял. По какой-то причине прослушиватель событий должен быть назначен в отдельной функции. Во всяком случае, код, который работает для маркера ниже:

while (counter < mylatlngs.length){
    marker = new google.maps.Marker({
        position: mylatlngs[counter], 
        map: map,
        title: nameArray[counter],
        url: urlArray[counter]
    });
    addListen(marker);
    markers.push(marker);
    bounds.extend(mylatlngs[counter]);
    counter++;
};

map.fitBounds(bounds);

function addListen(markerPass){
    google.maps.event.addListener(markerPass, 'click', function() {
        window.location.href = markerPass.url;
    });
};

Кто-то еще может прокомментировать, почему это будет работать ...