Do Not Load iFrame Google Map Until Lightbox Click

Question

I am embedding a few maps onto a page using the Google Maps iFrame Embed. These maps are loaded into a page and displayed in a lightbox (with other information) upon click. Is it possible to not load the iFrame content until the lightbox link is actually clicked?

I do not want to load 10+ maps when only one or two might be needed.

Is this possible to do?

I am using Fancybox 2 as the lightbox and jQuery 2.1.

I have considered using jQuery to inject the iFrame code on click but I am unsure of the best method.

Answer 1

There may be different ways, 1 possible:

store the src in another attribute of the iframe(e.g. data-src) and assign the src when the lightbox opens:

$(".selector").fancybox({
    afterLoad:function(){
        this.content.find('iframe')
       .each(function(i,f){ 
          f=$(f);
          if(!f.attr('src')) {
             f.attr('src',f.data('src'));
          } 
        });               
    }
});