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

});

I was thinking something along these lines, http://themeforest.net/item/the-navigator-premium-wp-location-guide-blog/full_screen_preview/397351 . So it may not be possible with the native infobox/window controls, but maybe with a custom? — intheblue25, Oct 11 '11 at 02:45

score 12 · Accepted Answer · edited Apr 27 '12 at 16:11

12

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

edited Apr 27 '12 at 16:11

Seybsen

14,989
4
40
73

answered Oct 17 '11 at 05:17

intheblue25

201
2
7

what about fadeout? which function should we override? – rainy Dec 16 '15 at 03:39

score 5 · Answer 2 · answered Aug 16 '13 at 22:45

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

answered Aug 16 '13 at 22:45

Jan

2,853
2
21
26

This worked for me, with a small tweaks for my setup. ' marker.addListener('click', function() { infowindow.open(map, marker); var iw_container = $(".gm-style-iw").parent(); iw_container.stop().hide(); iw_container.fadeIn(1000); });' – atomicadam May 14 '16 at 19:58

score 1 · Answer 3 · answered Oct 12 '12 at 08:41

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

;

score 0 · Answer 4 · answered Apr 10 '12 at 10:55

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

score 0 · Answer 5 · answered Jul 26 '16 at 21:44

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

score -1 · Answer 6 · edited Apr 11 '12 at 08:12

-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.

edited Apr 11 '12 at 08:12

Dr. Rajesh Rolen

14,029
41
106
178

answered Oct 11 '11 at 01:27

John McKim

590
1
5
13

John, thanks for looking at this, take a look at the link I provided in my edit and see what you think. – intheblue25 Oct 11 '11 at 16:27
They are doing their own infobox. Look in their iframe the wpnavigator has a script around line 155. They are also using this plugin http://gmap3.net. – John McKim Oct 11 '11 at 21:42

Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut

6 Answers6

Linked