Open link in Lightbox/iframe

Hi 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 ?

Hi 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 code

you can use the <a href=”https://
for your lightbox

don’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 :)

You 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 9 years ago by millertimesites.