2

Necesito insertar una ubicación en mi página (con la etiqueta <iframe>), pero me gustaría meterlo en un botón y que se oculte o se muestre según quiera el visitante.

He estado probando algún invento de HTML, que no funcionó, y buscando por google tampoco se resolvía mi duda.
Encontré esta página usando JavaScript, pero según iba leyendo me perdía, intentaba hacer algo probando el código, pero no me salía nada bien.

Probé (Aunque tenía poca esperanza de que funcionase) este código:

            <a href="<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.6344913099147!2d-
            3.7057171848150734!3d40.41694727936515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!
            4f13.1!3m3!1m2!1s0xd42287e19e23f5f%3A0xcec2a0e4d9bed6fb!2sPuerta%20del%2
            0Sol!5e0!3m2!1ses!2ses!4v1580210374850!5m2!1ses!2ses" width="400" height="300"
            frameborder="0" style="border:0;" allowfullscreen=""
            title="Puerta del Sol" class="button"></iframe> 
            <span>Ubicación</span></a>

Y efectivamente no funcionó, no he tocado JavaScript nunca, así que me pierdo con mucha facilidad, no sé si es posible hacer esto con html unicamente.

3 respuestas 3

5

Con ayuda del selector ~ (hermano posterior) y la pseudo-clase checked podemos solucionarlo sin el uso de Javascript.

#contenedor-iframe {
  width: 100%;
  margin-top: 20px;
}

/*Buscar el hermano #contenedor-iframe de un <input type="checkbox"> seleccionado y lo oculta*/
#ocultar-mapa:checked ~ #contenedor-iframe {
  display: none;
}
<input id="ocultar-mapa" type="checkbox">
<label for="ocultar-mapa">Ocultar mapa</label>
 
<div id="contenedor-iframe">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.6344913099147!2d-
  3.7057171848150734!3d40.41694727936515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!
  4f13.1!3m3!1m2!1s0xd42287e19e23f5f%3A0xcec2a0e4d9bed6fb!2sPuerta%20del%2
  0Sol!5e0!3m2!1ses!2ses!4v1580210374850!5m2!1ses!2ses" width="400" height="300"
  frameborder="0" style="border:0;" allowfullscreen=""
  title="Puerta del Sol" class="button"></iframe>
</div>

Referencias: selectores CSS, pseudo-clases CSS

4
  • ¿Y hay alguna forma de, en vez de un checkbox, sea un botón? ¡Muchas gracias por toda tu ayuda!
    – Lucía
    Commented el 28 ene. 2020 a las 12:23
  • Me temo que no. No tenemos ninguna pseudo-clase en CSS que nos permita simular un onclick de Javascript salvo :checked y esta no es aplicable a algo como un botón. Si quisieras hacerlo con un botón tendrías que optar por soluciones Javascript. Tienes dos respuestas que contemplan su uso. Pero se podría tratar de enmascarar el checkbox dentro de un botón. Déjame que pruebe algo.
    – phpMyGuel
    Commented el 28 ene. 2020 a las 12:29
  • Nada. Traté de colocar encima de un botón el checkbox con visibility: hidden y ocupando las medidas del botón (para tratar de que al pulsar el botón realmente se pulse el checkbox) pero no se pueden disparar eventos en elementos ocultos. Esto tiene bastante sentido a nivel de seguridad ya que las acciones que un usuario hace en la Web deben de ser lo más transparentes posibles.
    – phpMyGuel
    Commented el 28 ene. 2020 a las 12:49
  • No te preocupes! Implementé una de las respuestas de abajo, aunque quería evitar usar js, quería, por estética, usar un botón. Pero igualmente, muchísimas gracias
    – Lucía
    Commented el 28 ene. 2020 a las 13:38
2

isShow = true;
function mostrarOcultar(){
  if(isShow){			
    document.getElementById("map").style.display = "none";
    isShow=false;
  }else{
    document.getElementById("map").style.display = "block";
    isShow=true;
  }
}
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.6344913099147!2d-3.7057171848150734!3d40.41694727936515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42287e19e23f5f%3A0xcec2a0e4d9bed6fb!2sPuerta%20del%20Sol!5e0!3m2!1ses!2ses!4v1580210374850!5m2!1ses!2ses" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" title="Puerta del Sol" class="button"></iframe> 
<button onclick="mostrarOcultar()">Ubicación</button >

Aquí lo he realizado con javascript, esta pregunta tiene múltiples soluciones. Espero que te sea util.

0

Primero crea un div para incorporarle dentro tu iframe con el map y colocale un id, luego te recomendaría que lo hagas con jquery y los efectos fadein y fadeout que quedan visualmente mejores que un show / hide. Tu html:

<button id="miBoton">Mostrar Mapa</button>

<div id="mapa">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.6344913099147!2d-
            3.7057171848150734!3d40.41694727936515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!
            4f13.1!3m3!1m2!1s0xd42287e19e23f5f%3A0xcec2a0e4d9bed6fb!2sPuerta%20del%2
            0Sol!5e0!3m2!1ses!2ses!4v1580210374850!5m2!1ses!2ses" width="400" height="300"
            frameborder="0" style="border:0;" allowfullscreen=""
            title="Puerta del Sol" class="button">
  </iframe> 
  <span>Ubicación</span>
</div>

Jquery es una librería javascript y para incorporarla a tu proyecto podés llamar al archivo utilizando el servidor de Google, de esta manera no necesitas descargarla ni subirla al servidor.

Respecto a la función utilizas un onclick para detectar la acción del click, luego preguntas si está visible o no con un if y por último escondes / mostras ese div con fade.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
  $("miBoton").click(function() { 
    if($("#mapa").is(":visible")){
       $("#mapa").fadeOut("slow");
    } else{ 
       $("#mapa").fadeIn("slow");
    }    
  });
});
</script>

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.