Is there a way I can fadeIn custom content of a InfoWindow?

Question

I have a listener set on click for the markers I create no GoogleMaps (V3 API). When it is clicked, first I load the infowindow with some simple plain HTML with a "loading" gif.

Then I call a method, that grabs the content via ajax and calls infowindow.setContent(data) with the loaded data. But the transition between animated gif and the new loaded content is rather ugly. Is there a way I can make this a fadeIn/fadeOut?

Here's the code for the function that loads the content:

function load_infowindow_content(infowindow, user_id){
    $.ajax({
        url: site_root +'usuario/map_infowindow/' + user_id,
        success: function(data) {
            infowindow.setContent( data );
        }
    });
}

Looked around and didn't find anything. Thanks in advance.

How about jQuery’s `[.fadeIn()]`(https://api.jquery.com/fadein/)? — PattaFeuFeu, Jul 24 '14 at 20:02
Sure, but in what object, in what context? I'll add some code. — Christian Dechery, Jul 24 '14 at 20:03

score 1 · Answer 1 · edited May 23 '17 at 10:25

You can append your data to a div container with a specified id and then let it fade in using jQuery’s .fadeIn() method. Since the object hasn’t been invisible before, you might have to hide it first to then let jQuery make a transition from the container not being visible to being fully visible, like so:

$("#mapContentContainer").hide().fadeIn("slow");

EDIT

A more GoogleMaps specific way has been described on Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut (kudos to Intheblue25):

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

Is there a way I can fadeIn custom content of a InfoWindow?

1 Answers1