intheblue25 intheblue25 - 7 months ago 297
Javascript Question

Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut

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

});

Answer

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