Google maps API y fancybox jquery

[xxrandyxx]

Buenas, tengo un problema, por javascript llamo a este codigo

Código:

	function salvador() {
		var myOptions = {
			zoom: 15,
			center: new google.maps.LatLng(-12.207291133469997,-76.93360671401024),
			mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			var map = new google.maps.Map(document.getElementById("salvador"),
			myOptions);
			var image = 'http://www.lineauno.pe/iconmap.png';
			var myLatLng = new google.maps.LatLng(-12.207291133469997,-76.93360671401024);
			var beachMarker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				icon: image
				});}

Aparte tengo mi fancybox que lo llamo asi

Código:

$(document).ready(function() {

	$("#various1").fancybox({});
	$("#various2").fancybox({});
	
});

Aca abren los mapas, el primer DIV contiene la capa contenedora del fancybox y el que le sigue el que ejecuta el google maps para abrir el mapa

Código HTML:

<div id="inline1" style="width:640px; height:480px; overflow:auto;">
    	<div id="salvador" style="width:640px; height:480px"></div>
    </div>
    

Y ahora, mediante este boton llamo al fancybox para que abra

Código HTML:

<a id="various1" href="#inline1"  onClick="salvador();"><img src="css/images/maps.png" /></a> 

Y el resultado es que abre sin problemas, todo esta tranquilo, pero el error esta en que si cierro el fancybox y vuelvo abrirlo el mapa me sale descuadrado y se malogra el mapa, he buscado en internet y me dan esto

Código:

google.maps.event.trigger(map, 'resize');

Pero no se donde agregarlo, no entiendo, ojala alguien me pueda ashudar, este es el link de la ashuda

http://groups.google.com/group/googl...4567d14901aca4

[xxrandyxx]

Gracias por sus respuestas, me ayudaron mucho, saludos

[xxrandyxx]

Todos se pasaron, gracias

[Urdaris_Nox]

No sé si el código que pones es el real, pero bueno;

el various2. fancybox no hace nada, ya que no hay ID various2.

Tal y como lo tienes puesto, al hacer click a la imagen, se ejecuta el fancybox y el salvador().

Es decir, fancybox se abre y se carga el mapa.

Es posible que tu problema sea que no estás ocultando la capa del Mapa. Ahora mismo cuando haces click en la imagen el mapa se carga pero nadie lo oculta al cerrarse.

Yo no sé de fancyboxes, (es la primera vez que lo veo) pero tendrías que buscar algo como esto:

Defines el estilo del mapa salvador con display none.

Código PHP:

  <div id="salvador" style="width:640px; height:480px; display:none"></div>  
   

Al cargar el mapa salvador, ponemos su estilo en bloque.

Código PHP:

  function salvador() { 
    $("#salvador").css("display","block");  
   

Y al cerrar el fancybox, lo volvemos a poner oculto.

Código PHP:

      $("#various1").fancybox({ 
        'onClosed': function() { 
            $("#salvador").css("display","none"); 
        }, 
    });  
   

El problema es que hace un efecto raro, almenos a mí. Pero ya sabes por donde investigar :) Suerte y postea si descubres como hacerlo!!

[xxrandyxx]

voy a probar que tal