Google Maps API V3 InfoBox utilizando jQuery fadeIn y fadeOut

Question

He buscado en la web alto y bajo y no he podido encontrar un tutorial o ejemplo de uso de jQuery para fundir un InfoBox/InfoWindow en Google Maps, no el contenido del cuadro real /ventana. Aquí está mi código, no estoy seguro de lo que estoy haciendo mal, pero algo tampoco parece correcto.

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

En realidad, es posible fadein la caja de información, tiene que anular la función de empate en las infobox.js archivo así

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

Answer 2

No creo que esto sea posible porque Google no proporciona una opción de animación.

Intentar obtener el elemento Dom tampoco funcionará. La variable ib es una clase google.maps.InfoWindow no un elemento DOM. Como no hay una interfaz pública para obtener el elemento DOM para la ventana de información, no podrá acceder a esto usted mismo.

Si usa console.log(ib.get("id")), verá que la ID no está definida.

Answer 3

estoy usando el marcador biblioteca de utilidades de Google con etiqueta (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

Es fácil de usar jquery en las etiquetas.

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 anular el método de sorteo y aplicar el fundido de entrada, la animación se reproducirá incluso si se arrastra alrededor o zoom in/out en el map.If no desea que esto suceda, usted podría aplique el fadeIn en el método del controlador domready. En ese caso, el fade en efecto vendrá solo si usted abre la ventana de información.

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

;

Answer 5

intenté algo similar para un sitio web. aquí está mi código (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

El efecto fadeOut puede lograrse agregando class y setTimeout. Dejame explicar.

Por ejemplo:

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

cuando se agrega clase CSS, y, después del fin de la transición css se cierra el cuadro de información

y CSS (SASS) (clase .infoBox está reservado)

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

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