Using Fancybox Inside Infobubble.js With Google Maps Api

I can't seem to get fancyBox to load inside the InfoBubble (i.e., my info window). I have a button inside the InfoBubble, which when clicked, should display an image using fancyBox

Solution 1:

You need to wait for the domready event of the InfoBubble to fire before running this:

$(".dialog").fancybox({ width: '50%', height: '50%', closeClick: true });

example jsfiddle

google.maps.event.addListener(marker, 'click', function () {
    infoBubble.open(map, marker);
    google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
        $(".dialog").fancybox({
            width: '200px',
            height: '200px',
            closeClick: true
        });
    });
});

Solution 2:

I just had the same problem and I got it to work like this.

You'll need to add an event listener to the domready event as suggested by geocodezip, but with some modifications. Simply opening fancybox from with the domready event doesn't seem to work. I'm not sure why not.

From lots of fiddling, I was able to figure out that adding the code to the onclick event seemed to do it. Note that the onclick event handler has two statments. The first opens the fancybox. The second returns a false to the onclick event handler. Without that, page redirects immediately after the fancybox loads.

google.maps.event.addListener(marker, 'click', function () {
    infoBubble.open(map, marker);
    google.maps.event.addListenerOnce(infoBubble, 'domready', function () {

        var thecode = "$.fancybox.open([{href : 'preview.jpg', type : 'iframe'}]); return false;";

        $(".dialog").attr('onclick', thecode);

    });
});