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

Answer 1

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

;

Answer 3

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 4

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

Answer 5

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 6

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