Google maps - pass information into an event Listener

Question

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]);
                            });


                        }
                    }
                });
            }

score 24 · Accepted Answer · answered Sep 30 '10 at 04:15

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


                            }
                        }
                    });

That `.get` and `.set` was of great help for a project of mine, cheers! — Kokos, Aug 12 '11 at 14:47
The `.set` method works because `google.maps.Marker` class extends [`google.maps.MVCObject`](https://developers.google.com/maps/documentation/javascript/reference#MVCObject) — ruhong, Mar 24 '14 at 04:58

score 0 · Answer 2 · answered Jan 27 '23 at 20:23

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

Google maps - pass information into an event Listener

2 Answers2