I need to insert a location on my page (with the tag <iframe>
), but I would like to put it in a button and have it hide or show as the visitor wants.
I've been trying some HTML invention, which didn't work, and searching google didn't solve my doubt either.
I found this page using JavaScript , but as I was reading I got lost, I was trying to do something by trying the code, but it didn't work for me.
I tried (although I had little hope that it would work) this code:
<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>
And indeed it didn't work, I've never touched JavaScript so I get lost very easily, I don't know if it's possible to do this with just html.
With the help of the selector
~
(later brother) and the pseudo-classchecked
we can solve it without the use of Javascript .References: CSS selectors , CSS pseudo-classes
Here I have done it with javascript, this question has multiple solutions. I hope you find it useful.
First create a div to incorporate it into your iframe with the map and give it an id, then I would recommend that you do it with jquery and the fadein and fadeout effects that are visually better than a show / hide. Your html:
Jquery is a javascript library and to incorporate it into your project you can call the file using the Google server, this way you don't need to download or upload it to the server.
Regarding the function, you use an onclick to detect the click action, then you ask if it is visible or not with an if and finally you hide / show that div with fade .
Cheers