![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: google api key, google map, iframe, Lightbox, link, prettyphoto
-
AuthorPosts
-
January 24, 2014 at 1:22 pm #214381
Hey there,
i would love to be able to set the Link of buttons or slides to display in an iframe/lightbox.
See my link: http://www.virtuelle-touren.de/portfolio-eintrag/lippeschutz-bevoelkerungsschutz-kreis-lippe/
I would love to make the tour (linked in the Slider) open in an iframe such as the Link “PC/Desktop: Tour öffnen” wich is on the same page a little way down.How can i do that?
-
This topic was modified 10 years, 7 months ago by
Arne.
January 27, 2014 at 9:43 am #215226Hi Campleiter!
You can’t link the entire/slide image to an lightbox iframe popup. However you can select “Slide Link?” – “No Link” and then insert your iframe link into the slide title or description field (both fields support html code). The link must look like
<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>
and replace http://www.google.com with your url and the title and link text with your custom text. Note that you can not use the slide itself as a link if you add a link to the title/description field . otherwise you would add a link to a link and that’s not a valid html code.
Regards,
PeterJune 24, 2014 at 7:44 am #282842Hi Peter,
Can you shed some light – why this does not work for a google map ?<a href="http://maps.google.com.au/maps?q=new+york&hl=en&sll=43.299428,-74.217933&sspn=6.571804,14.765625&hnear=New+York,+New+York+County,+New+York,+United+States&t=m&z=10&iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="New York Map">New York Map</a>
even short url does not work
<a href="http://goo.gl/maps/ShS5K?iframe=true&width=640&height=360" rel="prettyPhoto[iframes]" title="New York Map">New York Map</a>
The lightbox opens but no content is loaded into the iframe
I have even checked out the authors website :: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone
Is there another way within ENFOLD theme to have a google map open in a lightbox from a button or link ?
June 25, 2014 at 12:03 pm #283527Hey!
Google forbid the use of iframe for google maps: http://tech.slashdot.org/story/11/10/23/1949227/google-not-reciprocating-on-iframe-usage
Cheers!
IsmaelJune 25, 2014 at 1:16 pm #283573Hi Ismael,
thanks for the reference blog which mentions embedding a google map
it only took 5 min to workout the embed and test!It took much longer to write these instructions ;)
You can open a google map in a lightbox iframe as long as your google map url reference includes “&key= ” a google map API key.
https://developers.google.com/maps/documentation/embed/guide#api_key
https://console.developers.google.com/
login with your google account
Create a project – “website domain name”
on the left menu
APIS &AUTH / APIs
enable :: Google Maps Embed API
on the left menu
APIS & AUTH / Credentials
Create new Key / Browser Key “This key can be deployed in your clients’applications.”
Enter the domain name of your clients website
A Public API Access key is generated.
copy the API KEY
GO HERE :: https://developers.google.com/maps/documentation/embed/start
setup your map / looks good!
paste your API KEY
click DONE!
Copy the <iframe codeyou can use the <a href=”https://
for your lightboxdon’t forget to add the “&iframe=true&width=100%&height=100%” to the end or the URL address
see example below ::
<a href="https://www.google.com/maps/embed/v1/place?q=New%20York%2C%20NY%2C%20United%20States&key=apikeyhere&iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="New York Map">New York Map</a>
cheers :)
June 26, 2014 at 8:02 am #283940Hi!
Thanks for sharing the instructions!
Cheers!
PeterNovember 10, 2015 at 5:01 am #533028You can also embed using an iframe without the API as Google fully allows it. I use it all over my travel website.
Here is some sample code
<iframe src="https://www.google.com/maps/d/embed?mid=zkPgKhjKqT-I.kt828za9IaU0" width="460" height="490"></iframe>
Works great and is responsive depending on how you use it.Thanks for the heads up on the light box method
-
This reply was modified 8 years, 10 months ago by
millertimesites.
November 12, 2015 at 3:42 pm #534830@millertimesites
Thanks for sharing!Regards,
Andy -
This topic was modified 10 years, 7 months ago by
-
AuthorPosts
- The topic ‘Open link in Lightbox/iframe’ is closed to new replies.