Need Google Map InfoWindow Hyperlink to Open Content in Overlay (Fusion Table Usage)

Question

I have the following code established to render the map in my site. When the map is clicked in any region, an info window pops up with some content including a hyperlink to open up a website with a form in it. I would like to utilize fancybox to open up this link "form" in an overlay. I have been unsuccessful getting Fancybox to work (version 1.3.4), and have read that it doesn't support calling the function from within an iframe. I was wondering if this was the issue, and if there was another way to utilize fancybox (or another overlay option)? Maybe an event listener or callback - any tips would be much appreciated!

<style>
    #map-canvas { width:850px; height:600px; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips.js" type="text/javascript"></script>

<script type="text/javascript">
    var map;
        var tableid = "1nDFsxuYxr54viD_fuH7fGm1QRZRdcxFKbSwwRjk";
    var layer;
    var initialLocation;
    var browserSupportFlag =  new Boolean();
    var uscenter = new google.maps.LatLng(37.6970, -91.8096);

    function initialize() {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        layer = new google.maps.FusionTablesLayer({
            query: {
                select: "'Geometry'",
                from: tableid
            },
            map: map
        });

                //http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/reference.html
                layer.enableMapTips({
                    select: "'Contact Name','Contact Title','Contact Location','Contact Phone'", 
                    from: tableid,
                    geometryColumn: 'Geometry',
                    suppressMapTips: false,
                    delay: 500,
                    tolerance: 8
                });
            ;
        // Try W3C Geolocation (Preferred) 
        if(navigator.geolocation) {
            browserSupportFlag = true;
            navigator.geolocation.getCurrentPosition(function(position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                map.setCenter(initialLocation);

                                //Custom Marker
                                var pinColor = "A83C0A";
                    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
                        new google.maps.Size(21, 34),
                        new google.maps.Point(0,0),
                        new google.maps.Point(10, 34));
                                var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
                        new google.maps.Size(40, 37),
                        new google.maps.Point(0, 0),
                        new google.maps.Point(12, 35));

                new google.maps.Marker({
                    position: initialLocation,
                    map: map,
                                        icon: pinImage,
                                        shadow: pinShadow
                });
            }, function() {
                handleNoGeolocation(browserSupportFlag);
            });
        }
        // Browser doesn't support Geolocation
        else {
            browserSupportFlag = false;
            handleNoGeolocation(browserSupportFlag);
        }

        function handleNoGeolocation(errorFlag) {
            if (errorFlag == true) {
                //Geolocation service failed
                initialLocation = uscenter;
            } else {
                //Browser doesn't support geolocation
                initialLocation = uscenter;
            }
            map.setCenter(initialLocation);
        } 
    }

google.maps.event.addDomListener(window, 'load', initialize);

</script>

RESOLVED by upgrading to Fancybox Version 2.

Answer 1

Looking at your demo site I think you need to fix some issues.

First, this code should work for your scenario

$(document).ready(function(){
  $("a.form-modal").fancybox({
 // I would suggested to set some dimensions to the iframe (try without them first if you want)
    width: 640, // or whatever
    height: 320, 
    type : "iframe"
  });
}); // ready

Notice that I am disregarding the use of .on() as suggested by Dr.Molle since it seems that you are using Fancybox v2.x, which uses the live method.

Second : link the proper Fancybox's CSS stylesheet according to the version you are using... currently you are linking to a fancybox v1.3.4 CSS stylesheet when you are using fancybox v2.1.3

Third : Use a single instance of jQuery (ideally the latest version). Currently you are loading two, v1.5.2 and v1.7

... also make sure that jQuery is loaded before any other js plugin so you will avoid this type of js errors

Timestamp: 26/10/2012 11:54:49 AM
Error: TypeError: jQuery("ul.sf-menu").superfish is not a function
Source File: https://sitepreview.na14.force.com/contact-us
Line: 756