Foros del Web - Ver Mensaje Individual

racatan1 · #1 (**permalink**) 05/02/2011, 20:47

Hola! Aprovecho para presentarme y dar las gracias a todo el mundo por este maravilloso oasis de ayuda. Tengo unos pocos conocimientos de html y css, y menos aún de jquery. Intento aprender este mundo procurando no morir en el intento. Os pido ayuda en este caso después de días dándole vueltas

Tengo un problema al mostrar un div que contiene un mapa de google maps. Al mostrar el div por defecto, que se abre con un slide, no hay problema. Pero quiero que al cargar la página esté oculto, para lo que uso "display: none;" en el div que lo alberga. Esto provoca que al abrirse el div, el mapa no aparece centrado (según he leído pq google maps interpreta el display none como div sin tamaño y coloca el centro del mapa en la esquina superior izquierda). Adjunto el código.

Sin embargo, en el último código que adjunto sí que se carga correctamente el mapa pero sin el efecto slide que busco (ni tampoco ocultándolo pulsando el mismo enlace).

¿Alguna solución para mostrar el mapa centrado con efecto slide partiendo de un div oculto? Muchísimas gracias.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mostrar ocultar div</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function()
{
 
$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle(1000);
});
 
$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
});
</script>
<style type="text/css">
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
}
a{
    color:#000;
    text-decoration:none;
}
#caja {
    width:70%;
    padding:5px;
    display: none;
}
#mostrar{
    display:block;
    width:70%;
    padding:5px;
}
</style>
</head>
<body>
<a href="#" id="mostrar">MOSTRAR OCULTAR DIV</a>
 
<div id="caja">
<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
</div>
</body>
</html>

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script>
function loadMap() {
document.getElementById('map').innerHTML = '<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Puerta+del+Sol,+Madrid&amp;aq=3&amp;sll=40.396764,-3.713379&amp;sspn=8.59894,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=Puerta+del+Sol,+PLAZA+Puerta+DEL+SOL,+14,+28013+Madrid,+Comunidad+de+Madrid&amp;ll=40.422906,-3.703423&amp;spn=0.031364,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>';
}
</script>
</head>
 
<body>
 
<a href="#" id="mostrar" onclick="javascript:loadMap()">Ver mapa</a>
<div id="map"></div> 
</body>
</html>