CODEWITHSUNDEEP
javascriptjquerygoogle-mapsmapsfancybox
user3074956
user3074956

Reputation: 111

Google Maps integrated with fancybox

Can somebody please how me understand why the google map is not working in fancybox? I have included my code below.

My JS

var fbCloseTitle = "close",
fbNextTitle = "next",
fbPrevTitle = "previous";$(".fancybox").fancybox({
width: '90%',
height: '90%',
fixed: false,
autoSize: false,
autoCenter: true,
tpl: {
    closeBtn: '<div title="' + fbCloseTitle + '" class="fancybox-item fancybox-close"></div>',
    next: '<a title="' + fbNextTitle + '" class="fancybox-item fancybox-next"><span></span></a>',
    prev: '<a title="' + fbPrevTitle + '" class="fancybox-item fancybox-prev"><span></span></a>'
}});

My HTML

<div class="cul center apear floatL">

 <div class="verticalLine"></div>
    <figure class="diamond relative"> <a class="fancybox fancybox.iframe" href="https://maps.google.com/maps?q=big%20smile%20creative+Cambridge,+UK"><img class="centerAbsolute" src="img/diamond04.jpg" alt="Graphic Design In Cambridge"></a></figure>
    <h2 class="proximaBold">we work in the heart of cambridge!</h2>
    <div class="line"></div>
    <p>We are very proud of our city and we try to provide a good, honest, local service that the businesses of Cambridge can rely on. You deserve it!</p>
  </div>

I think maybe my google maps url is wrong, the fancybox works fine, its just the map is not loading from google maps.

Upvotes: 0

Views: 1804

Answers (1)

JFK
JFK

Reputation: 41143

When you share the map from Google, you should actually get the second link (iframe tag) Paste HTML to embed in website, then extract the value of the iframe's src attribute and use it in your anchor's href like

<a class="fancybox fancybox.iframe" href="https://maps.google.com/maps?q=big+smile+creative+Cambridge,+UK&amp;ie=UTF8&amp;hq=big+smile+creative&amp;hnear=Cambridge,+United+Kingdom&amp;ll=52.205336,0.121817&amp;spn=0.027297,0.084543&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=16361723521191055041&amp;output=embed">google map</a>

Then, in your fancybox script, I would advice you to disable the iframe preload to avoid some known issues like the map off center so :

$(".fancybox").fancybox({
    iframe: {
        preload: false
    }
});

See JSFIDDLE

Upvotes: 1

Related Questions