来自Google Map V3的Fancybox iframe点击 [英] Fancybox iframe from Google Map V3 marker click

问题描述

我有一个Google Map（v3），我正在放置几个标记，并希望能够点击标记并拉起一个Fancybox iFrame。我无法弄清楚如何将标记中的URL拖入Fancybox。

我可以看到Fancybox的发射 - 弹出窗口显示很少，然后链接被拉到当前页面顶部的一个新页面。

以下是相关代码的片段：

  var sites = [
 ['Mount Evans'，39.58108，-105.63535，4，'www.myurl-1.com']，
 ['Irving Homestead'，40.315939，-105.440630，2，'wwww。 'myurl-2.com']，
 ['Badlands National Park'，43.785890，-101.90175，1，'www.myurl-3.com']，
 ['Spring Flatirons in the Spring'，39.99948 ，-105.28370，3，'www.myurl-4.com'] 
]; 
 
函数setMarkers（map，markers）{
 
 for（var i = 0; i< markers.length; i ++）{
 var sites = markers [一世]; 
 var siteLatLng = new google.maps.LatLng（sites [1]，sites [2]）; 
 var marker = new google.maps.Marker（{
 position：siteLatLng，
 map：map，
 title：sites [0]，
 zIndex：sites [ 3]，
 url：sites [4] 
}）; 
 
 
 google.maps.event.addListener（marker，'click'，function（）{
 $ .fancybox（{
 href：function（）{
 window.location.href = marker.url; 
}，
 width：1000，
 maxHeight：666，
 fitToView：true，
 autoSize：false ，
类型：'iframe'，
填充：0，
 openEffect：'elastic'，
 openSpeed：150，
 aspectRatio：true，
 closeEffect ：'elastic'，
 closeSpeed：150，
 closeClick：true，
 iframe：{scrolling：'no'
}，
 preload：true 
 }）; 
}）; 
 
 
 
 $ b  

解决方案

这是我用来解决这个问题的最终代码：

  var sites = [
 ['埃文斯山'，39.58108，-105.63535,4，'www.myurl-1.com']，
 ['Irving Homestead'，40.315939，-105.440630,2，'wwww.myurl-2.com' ]，
 ['Badlands National Park'，43.785890，-101.90175，1，'www.myurl-3.com']，
 ['Spring Flatirons'，39.99948，-105.28370，3， 'www.myurl-4.com'] 
]; 
 
函数setMarkers（map，markers）{
 
 for（var i = 0; i< markers.length; i ++）{
 var sites = markers [一世]; 
 var siteLatLng = new google.maps.LatLng（sites [1]，sites [2]）; 
 var marker = new google.maps.Marker（{
 position：siteLatLng，
 map：map，
 title：sites [0]，
 zIndex：sites [ 3]，
 href：sites [4] 
}）; 
 
 
 google.maps.event.addListener（marker，'click'，function（）{
 $ .fancybox（{
 href：sites [4]， 
 width：1000，
 maxHeight：666，
 fitToView：true，
 autoSize：false，
类型：'iframe'，
 padding：0， 
 openEffect：'elastic'，
 openSpeed：150，
 aspectRatio：true，
 closeEffect：'elastic'，
 closeSpeed：150，
 closeClick： true，
 iframe：{scrolling：'no'
}，
 preload：true 
}）; 
}）; 
 
} 
 
} 
  

只需引用href在标记选项中，并在fancybox调用中提及。

I have a Google Map (v3) that I am placing several markers into, and want to be able to click on the markers and pull up a Fancybox iFrame. I can't figure out how to pull the URL from the marker into Fancybox.

I can see the Fancybox firing - the popup window appears breifly and then the link is pulled up as a new page over top of the current page.

Here is a snippet of the relevant code:

 var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'www.myurl-1.com'],
['Irving Homestead', 40.315939, -105.440630, 2, 'wwww.myurl-2.com'],
['Badlands National Park', 43.785890, -101.90175, 1, 'www.myurl-3.com'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'www.myurl-4.com']
];

function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            url: sites[4]
        });


    google.maps.event.addListener(marker, 'click', function() {     
        $.fancybox({
            href : function() {
                    window.location.href = marker.url;
              },
            width : 1000,
            maxHeight   : 666,
            fitToView   : true,
            autoSize    : false,
            type: 'iframe',
            padding: 0,
            openEffect : 'elastic',
            openSpeed  : 150,
            aspectRatio : true,
            closeEffect : 'elastic',
            closeSpeed  : 150,
            closeClick : true,
            iframe : { scrolling : 'no'
            },
            preload   : true
        });
    });

    }

}

解决方案

Here is the final code I used to solve this:

    var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'www.myurl-1.com'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'wwww.myurl-2.com'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'www.myurl-3.com'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'www.myurl-4.com']
    ];

    function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            href: sites[4]
        });


    google.maps.event.addListener(marker, 'click', function() {    
        $.fancybox({
            href : sites[4],
            width : 1000,
            maxHeight   : 666,
            fitToView   : true,
            autoSize    : false,
            type: 'iframe',
            padding: 0,
            openEffect : 'elastic',
            openSpeed  : 150,
            aspectRatio : true,
            closeEffect : 'elastic',
            closeSpeed  : 150,
            closeClick : true,
            iframe : { scrolling : 'no'
            },
            preload   : true
        });
    });

    }

}

Just referenced href in the marker options and referred to in the fancybox call.

这篇关于来自Google Map V3的Fancybox iframe点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！