Fancybox從谷歌地圖V3的iframe點擊

我有一個谷歌地圖（V3），我正在放置幾個標記，並希望能夠點擊標記並拉起一個Fancybox iFrame。我無法弄清楚如何將標記中的URL拖入Fancybox。Fancybox從谷歌地圖V3的iframe點擊

我可以看到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'], 
['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 
     }); 
    }); 

    } 

}

來源

2013-08-01 dchadney

我解決了它：$ .fancybox（{HREF：網站[4]}）; – dchadney

[在Google地圖中使用事件監聽器調用Fancybox而非默認Infowindow]的可能副本（http://stackoverflow.com/questions/4801488/calling-fancybox-from-event-listener-in-google-maps-instead-of -default-infowindo） – geocodezip

這裏是我用來解決這個最終代碼：

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 
     }); 
    }); 

    } 

}

剛剛提到的href在標記選項，並提到在fancybox電話。

來源

2013-08-02 16:57:35 dchadney

檢查也是這個職位開放DIV花式箱谷歌地圖標記

$("a#fancyBoxLink").fancybox({ 
     'href' : '#myDivID', 
     'titleShow' : false, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic' 
    });

Fancybox with Google Map Marker

來源

2014-01-22 05:25:45 shamcs

Fancybox從谷歌地圖V3的iframe點擊

回答

相關問題