Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut

Question

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

Answer 2

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.

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

Answer 4

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

;

Answer 5

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

Answer 6

The fadeOut effect can be achieved by adding class and setTimeout. Let me explain.

For example:

$('.close-el')
        .on('click', function(e) {
            e.stopPropagation();
            $(infobox.div_).addClass('is-closing');
            setTimeout(function() {
                infobox.close();
            }, 700);
    }); 

when you add CSS class, and, after end of css transition you close the info box

and CSS (sass) (.infoBox is reserved class)

.infoBox {
    &.is-closing {
        transition: transform 400ms, opacity 400ms;

        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
}