adding jscrollpane to a google maps infowindow

Question

so it's basically all in the title... I'm using jscrollpane elsewhere on the page so I know it works, but I can't get anything besides the default scrollbars on the google maps infowindow. some code:

PanelList = function(speed, target) {  // jscrollpane is working on
    this.speed = speed || 300;         // these panels next to the google map
    this.target = target || '#panel-target';
    this.array = [];
    $('.scrollpane').jScrollPane({autoReinitialise: true});
    this.scrollAPI = $(this.target).data('jsp');
}

// ... lots of code left out for brevity

MarkerList = function(map) {
    this.map = map;
    this.array = [];
    this.infoWindow = new google.maps.InfoWindow();
    this.savedBounds = new google.maps.LatLngBounds();
    var cachedThis = this;
    google.maps.event.addListener(map, 'click', function() {
        cachedThis.infoWindow.close();
    });
}

MarkerList.prototype = {
    makeInfoWindow: function(map, marker) {
        this.infoWindow.setContent('<div class="infowindow scrollpane">'
                                   +'<h2>'+marker.title+'</h2>'
                                   +marker.content
                                   +'</div>');
        this.infoWindow.open(map, marker);
        // assume I should add some jscrollpane code here 
        // but nothing seems to work
    },

Seems like the problem is maybe a) jscrollpane is initialized before the infowindow is created, b) I'm targeting a child element of the infowindow when I need to target something higher up, or c) the gmaps API is just not playing nice with jscrollpane and there's nothing I can do. But I really have no idea.

Answer 1

Aha! The code below works:

   makeInfoWindow: function(map, marker) {
        this.infoWindow.setContent('<div class="infowindow">'
                                   +'<h2>'+marker.title+'</h2>'
                                   +marker.content
                                   +'</div>');
        this.infoWindow.open(map, marker);
        google.maps.event.addListener(this.infoWindow, 'domready', function() {
          $('.infowindow').parent().parent().jScrollPane({autoReinitialise: true});
        });
    },