Fancy Box and Google Maps

0
votes

I'm trying to use fancyBox2 to display Google Maps. When I copy and paste the appropriate link that exists on the demo page (http://webdesignandsuch.com/posts/fancybox-download/google-maps-fancybox/fancybox-google-maps.html) into my web page the map works just fine. Here's a copy of that link.

<a class="various fancybox.iframe" title="Yankees Suck!" href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=fenway+park&amp;sll=42.291762,-71.425894&amp;sspn=0.20368,0.315514&amp;ie=UTF8&amp;hq=Fenway+Park&amp;hnear=Fenway+Park,+4+Yawkey+Way,+Boston,+Massachusetts+02215-3409&amp;z=14&amp;iwloc=A&amp;cid=10154405128186028253&amp;ll=42.346751,-71.096946&amp;output=embed"><img src="demo/img1s.jpg"></a>

But when I try to replace the above map with a different one, I can't get the map to appear, though the modal window functions as it should. I'm not sure where the error is. Here's the map location I would like to use.

https://www.google.com/maps/place/Parque+Nacional+Manuel+Antonio,+Cant%C3%B3n+de+Aguirre,+Puntarenas/@9.392308,-84.1369879,16z/data=!4m2!3m1!1s0x8fa1719c9ba9f54b:0x95e66139ce5c4a86

Could somebody kindly illustrate what the proper link should look like? Thanks for any help you can provide.

Kind regards,

Mark

1
google-mapsfancybox-2

1 Answers

0
votes

It works for me if I use jquery 1.7.1 and use the provided "embed" URL (instructions below).

I replaced the URL in the example with one from your linked map (I clicked on the "hamburger menu" to the left of "Parque Nacional Manuel Antonio, Cantón de Aguirre, Puntarenas", then "share or embed", then on the "Embed Map" tab. The URL inside the iframe: <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d7872.6622650279005!2d-84.1369879!3d9.392308!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1451580267451" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>)

Live example

The URL is:

href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7872.6622650279005!2d-84.1369879!3d9.392308!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa1719c9ba9f54b%3A0x95e66139ce5c4a86!2sParque+Nacional+Manuel+Antonio!5e0!3m2!1sen!2sus!4v1451580042799"