Google maps – pass information into an event Listener

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?

  • Catching 'Last Record' in Coldfusion for IE javascript bug
  • How best do I implement mysql data into a line of javascript code?
  • Javascript asynchronous Function Call : Retrieve calling function paramters in callback function
  • Google Maps Marker title no longer appears as tooltip on hover
  • fitBounds() shows whole earth (if map is first hidden and then shown)
  • How do I clear this setInterval
  • I tried this approach but it didn’t 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]);
                                });
    
    
                            }
                        }
                    });
                }
    

  • Google Maps Api v3, dynamic zoom level when using places library
  • how to use Google Map Api in JSP?
  • Change default text “Enter a Location” In Google Maps Places API
  • Rendering of Google Markers is relatively slow in IE7
  • CORS error in Google Maps Geocoding API
  • Google maps directions API redirecting to map.google.com
  • One Solution collect form web for “Google maps – pass information into an event Listener”

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