Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut-Collection of common programming errors

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

});`

Thanks for your help in advance.

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

2. If you override the draw method and apply the fade in,the animation will be played even if you drag around or zoom in/out in the map.If you don’t want that to happen,you could apply the fadeIn in the domready handler method.In that case the fade in effect will come only if you the infowindow is opened.

    google.maps.event.addListener(ib, 'domready', function() {
               jQuery(ib).hide().fadeIn('slow');
    })
   

   ;

3. I am using the google utility library marker with label (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

   It is easy to use jquery on the labels.

   google.maps.event.addListener(marker, "mouseover", function (e) { 
       //console.log(this); this.label.labelDiv_.style.display = 'block'; 
       $(this.label.labelDiv_).fadeIn();
   });
   
   google.maps.event.addListener(marker, "mouseout", function (e) { 
       //this.label.labelDiv_.style.display = 'none'; 
       $(this.label.labelDiv_).fadeOut();
   });
   

4. i tried something similar for a website. here is my code. (gm-api-v3)

   var infowindow = new google.maps.InfoWindow({
       content: contentString
   });
   
   function iwFadeIn() {
       infowindow.open(map, marker);
       var iw_container = $(".gm-style-iw").parent();
       iw_container.stop().hide();
       iw_container.fadeIn(1000);
   }
   

5. I do not think this is possible because Google does not provide an animation option.

   Trying to get the Dom element will not work either. The ib variable is an google.maps.InfoWindow class not a DOM element. Since there is no public interface to get the DOM element for the info window you will not be able to access this yourself.

   If you use console.log(ib.get("id")) you will see that the ID is undefined.

Originally posted 2013-11-09 23:14:37.