InfoWindow shows same content for different markers with markerclusterers

Question

I cant find an error in the below code, but it shows the same content for all infowindows.

$('#map').gmap({'zoom': 2, 'disableDefaultUI':true}).bind('init', function(evt, map) { 
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    var image = 'http://localhost/images/dot.png';
    for ( var i = 0; i < len; i++ ) {

        boxText.innerHTML = '<div id="content" style="margin-left:2px; font-weight:bold; margin-top:1px;overflow:hidden;">'+
                        '<div id="bodyContent" style="font-weight:bold;">'+
                        '<div style="font:10px verdana;color:#375A9E; margin-left:2px;font-weight:bold;">' +
                        '<a href="' + locations[i][5] + '" target="_blank">' + locations[i][0] + '</a><div>' +
                        '</div>';
                boxText1.innerHTML ='<div id="content" class="map_rightclick" style="margin-left:10px; font-weight:bold; margin-top:1px;overflow:hidden;">'+
                        '<div id="bodyContent" style="font-weight:bold;">'+
                        '<div style="font:10px verdana;color:red; margin-left:2px;">' +
                        '<a href="' + locations[i][5] + '" target="_blank" style="font-weight:bold;">' + locations[i][0] + '</a><div>' +
                        '<br><b>City:</b><span style="color:black;">' + locations[i][3] +'</span>'+
                   '</div>';                       
        $('#map').gmap('addMarker', { 
            'position': new google.maps.LatLng(locations[i][1], locations[i][2]),
            'icon': image
        }).click(function() {
            $('#map').gmap('openInfoWindow', { content : boxText }, this);
        }).rightclick(function(){
          $('#map').gmap('openInfoWindow', { content : boxText1 }, this);
                  }).mouseover(function(){
          $('#map').gmap('openInfoWindow', { content : boxText }, this);
          }).mouseout(function(){
          $('#map').gmap('closeInfoWindow',this);
          });
    }
    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
    // To call methods in MarkerClusterer simply call 
    // $('#map_canvas').gmap('get', 'MarkerClusterer').callingSomeMethod();
});

Answer 1

Looks like you're attaching the click handler and the infowindow content to the map itself, not the marker (and you're attaching it len times!).

    $('#map').gmap('addMarker', { 
        'position': new google.maps.LatLng(locations[i][1], locations[i][2]),
        'icon': image
    }).click(function() {
        $('#map').gmap('openInfoWindow', { content : boxText }, this);
    })

The infowindow content will only have the content of the last item in your for loop.

You want to associate the content of the infowindow with the marker. You'll need to do that in the callback of the 'addMarker'.

Looks like you're using jquery.ui's map plugin. Check out this example: http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_addInfoWindow