How do I make fancybox work from Google Maps InfoBox on mobile (iphone safari)?

Question

I'm trying to create a Google Maps InfoBox that contains some textual info and also a google sphere which opens with fancybox.

My first solution was to use Google Maps InfoWindow, which actually worked - fancybox iframe was opening from the InfoWindow on desktop and mobile.

-Here is my working solution for desktop and mobile with InfoWindow: http://spoti.lv/infowindow/

I needed to customize the InfoWindow, and so I found the InfoBox, which works in a similar way but has more customization options.

The problem was that InfoBox did not behave like the original InfoWindow.

1.At first the fancybox did not work at all, it was just directing me to the url specified in a href.

2.Then I found out that setting the enableEventPropagation option of InfoBox to true made it work - on desktop but not on iphone safari browser.

-Here is my working solution for desktop only with InfoBox: http://spoti.lv/infobox/

The Big Question: How do I make fancybox work from Google Maps InfoBox on mobile (iphone safari)?

Answer 1

When you set your content, set it to be like this:

var content = '<div id="gWindow"><a data-apply="fancybox.iframe fancybox-effects-b" data-origin="iframe.html?panoid='+ pano +'" title="' + name + ' - ' + city + ', ' + street + '" href="javascript:;"><div id="gImgWrap"><img src="http://maps.googleapis.com/maps/api/streetview?size=300x200&fov=120&heading=350&pitch=-2&pano=' + pano + '&sensor=false" /></div></a><div id="gWrap"><h3>' + name + '</h3><span id="gCity">' + city + '</span>, ' + street + '<br /><span id="gRest">' + 'Darba laiks: ' + time + '<br />' + 'Cena: ' + price + ' EUR' + '<br /><a href="http://' + web + '" target="_blank">' + web + '</a></span></div></div>';

then when defining your event extend it so there are no overlaps

google.maps.event.addListener(marker, 'click', (function(marker, content) {

        return function() {

            infobox.setContent(content);

            infobox.open(map, marker);

            resetMapClickEvents();

        }

    })(marker, content));

and lastly add the reset command

var resetMapClickEventsIndex = 0, resetMapClickEvents = function(){
// because you reset event after ever info box created,
// make sure it gets recreted when reupdated
// and does not recreate if fancy is triggered
resetMapClickEventsIndex++;
$('[data-origin]').unbind().bind('click', function(){
    if($(this).data('index') !== resetMapClickEventsIndex){
        $(this).data('index', resetMapClickEventsIndex)
        $(this).fancybox({
            type: 'iframe',
            href: $(this).data('origin'),
            modal: true,
            transitionIn: 'elastic',
            transitionOut: 'elastic',
            speedIn: 600, 
            speedOut: 200
        });
        $(this).trigger('click');
    }
});

};

have not tried the code, but this should give you the concept of my theory.