I think this is a scope problem. Since the event is triggered after I have added all the listeners num_markers has always been overridden by the next cycle in the loop.

Is there some way I can pass variables to the event function?

I tried this approach but it didn't work for me. Google Maps: Event Listener only remembering final value of variable

            var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
            var info_window = new google.maps.InfoWindow();
            var markers = [];
function load_markers() {
                var bounds_url = map.getBounds().toUrlValue();
                $.ajax({
                    url:'/retailer-markers?bounds='+bounds_url,
                    dataType: 'json',
                    success: function(data) {
                        for(i = 0; i < data.length; i++) {
                            var marker_pos = new google.maps.LatLng(data[i]['lat'], data[i]['long']);
                            //Every time the listener event is called this number is the length of the array
                            var marker_num = get_markers_count();

                            markers[marker_num] = new google.maps.Marker({
                                position: marker_pos,
                                map: map,
                                title:data[i]['Title'],
                                icon: image
                            });
                          
                            google.maps.event.addListener(markers[marker_num], 'click', function() {
                                info_window.setContent('hello');
                                var pos = markers[marker_num].getPosition();
                                info_window.setPosition(pos);
                                info_window.open(map, markers[marker_num]);
                            });


                        }
                    }
                });
            }

I think this is a scope problem. Since the event is triggered after I have added all the listeners num_markers has always been overridden by the next cycle in the loop.

Is there some way I can pass variables to the event function?

I tried this approach but it didn't work for me. Google Maps: Event Listener only remembering final value of variable

            var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
            var info_window = new google.maps.InfoWindow();
            var markers = [];
function load_markers() {
                var bounds_url = map.getBounds().toUrlValue();
                $.ajax({
                    url:'/retailer-markers?bounds='+bounds_url,
                    dataType: 'json',
                    success: function(data) {
                        for(i = 0; i < data.length; i++) {
                            var marker_pos = new google.maps.LatLng(data[i]['lat'], data[i]['long']);
                            //Every time the listener event is called this number is the length of the array
                            var marker_num = get_markers_count();

                            markers[marker_num] = new google.maps.Marker({
                                position: marker_pos,
                                map: map,
                                title:data[i]['Title'],
                                icon: image
                            });
                          
                            google.maps.event.addListener(markers[marker_num], 'click', function() {
                                info_window.setContent('hello');
                                var pos = markers[marker_num].getPosition();
                                info_window.setPosition(pos);
                                info_window.open(map, markers[marker_num]);
                            });


                        }
                    }
                });
            }

• javascript
• google-maps
• scope
• google-maps-api-3

2 Answers 2

The solution was to use this for the marker details. Any other variables can be set onto the marker with marker.set('some_var', data);

$.ajax({
                        url:'/retailer-markers?bounds='+bounds_url,
                        dataType: 'json',
                        success: function(data) {
                            for(i = 0; i < data.length; i++) {
                                var info_window = get_info_window();

                                var marker_pos = new google.maps.LatLng(data[i]['lat'], data[i]['long']);

                                marker_num = get_markers_count();

                                marker = new google.maps.Marker({
                                    position: marker_pos,
                                    map: map,
                                    title:data[i]['Title'],
                                    icon: image
                                });

                                markers.push(marker);
                                marker.set('retailer', data[i]);

                                google.maps.event.addListener(marker, 'click', function() {
                                    var retailer = this.get('retailer');

                                    info_window.setContent(retailer['name']);
                                    info_window.open(map, this);
                                });


                            }
                        }
                    });

I defined a separate function and the event and THIS was available. Everything was attached to this.

var _markerListener = function(event){
            // this and event are available here. 
            console.log(this);
        };
    google.maps.event.addListener(tempMarker, 'click', _markerListener);