Google Maps API V3 InfoBox en utilisant jQuery fadeIn et fadeOut

Question

J'ai cherché sur le Web haut et bas et n'ai pas été capable de trouver un tutoriel ou un exemple d'utilisation de jQuery pour fondre une InfoBox/InfoWindow dans Google Maps pas le contenu de la boîte réelle /fenêtre. Voici mon code, je ne suis pas sûr de ce que je fais mal, mais quelque chose ne me semble pas correct.

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

Il est en effet possible de FADEIN le Infobox, vous devez remplacer la fonction de tirage au sort dans le fichier infobox.js comme celui-ci

var oldDraw = ib.draw; 
ib.draw = function() { 
    oldDraw.apply(this); 
    jQuery(ib.div_).hide(); 
    jQuery(ib.div_).fadeIn('slow'); 
} 

Answer 2

Je ne pense pas que ce soit possible car Google ne propose pas d'option d'animation.

Essayer d'obtenir l'élément Dom ne fonctionnera pas non plus. La variable ib est une classe google.maps.InfoWindow et non un élément DOM. Comme il n'y a pas d'interface publique pour obtenir l'élément DOM de la fenêtre d'information, vous ne pourrez pas y accéder vous-même.

Si vous utilisez console.log(ib.get("id")), vous verrez que l'ID n'est pas défini.

Answer 3

J'utilise le marqueur de la bibliothèque utilitaire google avec l'étiquette (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

Il est facile d'utiliser jquery sur les étiquettes.

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

Si vous substituez la méthode de tirage et appliquer le fondu dans, l'animation sera jouée même si vous faites glisser autour des zooms avant/arrière dans le map.If vous ne voulez pas que cela se produise, vous pourriez appliquez le fadeIn dans la méthode domready handler. Dans ce cas, l'effet de fondu ne viendra que si vous ouvrez l'infowindow.

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

;

Answer 5

J'ai essayé quelque chose de similaire pour un site Web. voici mon 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

L'effet fadeOut peut être obtenu en ajoutant class et setTimeout. Laisse-moi expliquer.

Par exemple:

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

lorsque vous ajoutez la classe CSS, et, après la fin de la transition css vous fermez la boîte info

et CSS (SASS) (.infoBox est classe réservée)

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

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