I have searched the web high and low and have not been able to find a tutorial or example of using jQuery to fade an InfoBox/InfoWindow in Google Maps not the content the actual box/window. Here is my code, I'm not sure what I'm doing wrong, but something also doesn't seem right.
google.maps.event.addListener(marker, 'mouseover', function() {
ib.setContent(html);
ib.open(map, marker);
ib.setValues({type: "point", id: 2})
var idName = marker.get("id"); //I was trying to the id's of the elements here
var boxName = ib.get("id"); //to use in my jQuery
jQuery(idName ).mouseover(function() {
jQuery(boxName ).fadeIn('slow', function() {
// Animation complete
});
});
});
It is actually possible to fadein the infobox, you have to override the draw function in the infobox.js file like this
var oldDraw = ib.draw;
ib.draw = function() {
oldDraw.apply(this);
jQuery(ib.div_).hide();
jQuery(ib.div_).fadeIn('slow');
}