intheblue25 intheblue25 - 1 year ago 523
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);, 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 Source

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() {