adding jscrollpane to a google maps infowindow
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() {
cached开发者_Go百科This.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.
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});
});
},
精彩评论