Google maps v3 marker events

Question

I have a map which adds a collection of markers using a for loop and separate function

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++;
    }

As you can see I am trying to add a click event at the bottom which will carry out a different action depending on what marker has been clicked (or the same action but to a different table row). However, it doesn't work. Debugging it seems as if the click event is replaced with each for loop rather than a new one created, so it will always change the background colour of the last table row (in this case the fourth one).

Any help much appreciated.

Chris

Edit: Here is all my code

<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>

Solved :)

Found this article here: http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

Essentially, had to move the function within the click event to an external function which returned a function with my desired effects. It seems this may be a common Javascript thing, not just related to maps. Just my inexperience!

Hope this helps you all.

Answer 1

Solved :)

Found this article here: http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

Essentially, had to move the function within the click event to an external function which returned a function with my desired effects. It seems this may be a common Javascript thing, not just related to maps. Just my inexperience!

Hope this helps you all.

Answer 2

Where and how was the variable pointer defined? The event handler was not replaced but each time it's called it reads the pointer global variable, which should always be 4 after all markers are created on the map.

Try replace

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

with

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