Google Maps API V3 InfoBox using jQuery fadeIn and fadeOut

Question

I searched the Internet high and low and could not find a tutorial or an example of using jQuery to fade InfoBox / InfoWindow on Google Maps, and not the contents of the actual window / window. Here is my code, I'm not sure what I'm doing wrong, but something seems wrong too.

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 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 fadein 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 tried something similar for a website. here is my code. (G-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 3

If you override the draw method and apply Fade in, the animation will play even if you drag or zoom in / out the map. If you do not want this to happen, you can apply fadeIn to the domready handler method. In this case, the fading effect will only work if you open the window.

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

;

Answer 4

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

Easy to use jquery on shortcuts.

 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 5

The effect of fadeOut can be achieved by adding a 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 the CSS class and after the css transition is complete you close the info window

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

 .infoBox { &.is-closing { transition: transform 400ms, opacity 400ms; transform: translate3d(0, 30px, 0); opacity: 0; } } 

Answer 6

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

Trying to get a Dom element will not work either. The ib variable is the google.maps.InfoWindow class, not the DOM element. Since there is no open interface for getting the DOM element for the info window, you cannot access it yourself.

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