Google maps v3 отметки событий

Question

У меня есть карта, которая добавляет коллекцию маркеров, используя цикл for и отдельную функцию

function initialize() {
        // Go and fetch the pointers from the database and create an array of them here
        pointerArray.push(new pointers("meet coach", 51.4550, -0.969088));
        pointerArray.push(new pointers("meet coach", 51.4530, -0.964195));
        pointerArray.push(new pointers("meet coach", 51.0530, -0.714195));
        pointerArray.push(new pointers("meet coach", 51.3530, -0.114195));

...

        for (i = 0; i < pointerArray.length; i++) {
            setTimeout(function () {
                addMarkers();
            }, (i + 1) * 200);
        }
}

function addMarkers() {
        var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: pointerArray[pointer].title,
            icon: "/images/icons/pointer-" + (pointer + 1) + ".png"
        });

        google.maps.event.addListener(marker, 'click', function () {
            $('#mapDirections tr#' + (pointer + 1)).css('background', 'red');
        });


        pointer++;
    }

Как вы видите, я пытаюсь добавить событие щелчка внизу, которое будет выполнять другойдействие в зависимости от того, по какому маркеру щелкнули (или то же действие, но для другой строки таблицы).Тем не менее, это не работает.При отладке создается впечатление, что событие click заменяется на каждый цикл for, а не на новый созданный, поэтому всегда будет меняться цвет фона последней строки таблицы (в данном случае четвертой).

Anyочень признателен за помощь.

Крис

Редактировать: Вот весь мой код

<script type="text/javascript">

    var pointerArray = new Array();
    var map;
    var lat;
    var long;
    var pointer = 0;

    $(document).ready(function () {

        initialize();

    });

    function initialize() {
        // Go and fetch the pointers from the database and create an array of them here
        pointerArray.push(new pointers("meet coach", 51.4550, -0.969088));
        pointerArray.push(new pointers("meet coach", 51.4530, -0.964195));
        pointerArray.push(new pointers("meet coach", 51.0530, -0.714195));
        pointerArray.push(new pointers("meet coach", 51.3530, -0.114195));

        var bounds = new google.maps.LatLngBounds(); ;
        for (i = 0; i < pointerArray.length; i++) {
            bounds.extend(new google.maps.LatLng(pointerArray[i].lat, pointerArray[i].long));
        }

        // set map options
        var myOptions = {
            zoom: 16,
            center: bounds.getCenter(), /* Center on the group here */
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: false,
            panControl: false,
            zoomControl: false,
            streetViewControl: false,
            scaleControl: false,
            rotateControl: false
        };

        // Generate map to draw on
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        map.fitBounds(bounds);

        // my position
        for (i = 0; i < pointerArray.length; i++) {
            setTimeout(function () {
                addMarkers();
            }, (i + 1) * 200);
        }

    }


    function addMarkers() {
        var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: pointerArray[pointer].title,
            icon: "/images/icons/pointer-" + (pointer + 1) + ".png"
        });

        var currPointer = pointer;
        google.maps.event.addListener(marker, 'click', function () {
            $('#mapDirections tr#' + (currPointer + 1)).css('background', 'red');
        });


        pointer++;
    }


    function pointers(title, lat, long) {
        this.title = title;
        this.lat = lat;
        this.long = long;
    }




</script>

Решено:)

Нашел эту статью здесь: http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

По сути, пришлось переместить функцию в событии click во внешнюю функцию, которая вернула функцию с моими желаемыми эффектами.Кажется, это может быть обычным явлением в Javascript, а не только с картами.Просто моя неопытность!

Надеюсь, это поможет вам всем.

Answer 1

Решено:)

Нашел эту статью здесь: http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

По сути, пришлось переместить функцию в событии click во внешнюю функцию, которая вернула функцию с моими желаемыми эффектами. Кажется, это может быть обычным явлением в Javascript, а не только с картами. Просто моя неопытность!

Надеюсь, это поможет вам всем.

Answer 2

Где и как была определена переменная pointer?Обработчик события не был заменен, но каждый раз, когда он вызывается, он читает глобальную переменную pointer, которая всегда должна быть равна 4 после создания всех маркеров на карте.* с

    var currPointer = pointer;
    google.maps.event.addListener(marker, 'click', function () {
        $('#mapDirections tr#' + (currPointer + 1)).css('background', 'red');
    });