需要Google地圖才能用Fancybox打開多個標記彈出框

Question

我正在創建一個帶有多個標記的Google地圖，我想在點擊時彈出一個Fancybox lightbox。我必須承認，我是JavaScript和Google Maps API的新手。

我已經把一些不同的示例腳本放在一起，並拿出一些實際上正常工作的東西。我以我想要的方式標記標記（沒有字幕......我仍然必須弄清楚），地圖樣式和我想要的樣式，甚至在點擊時還會彈出燈箱標記。

但是，所有標記最終都會在Lightbox中打開一個網址。我想這有點道理。 Fancybox代碼正在分發給所有標記，而不是單獨分發。我嘗試使用url創建另一個參數並將其傳遞到Fancybox腳本，但它仍然只是拾取最後一個標記的URL並將其用於所有標記。我將如何能夠獲取URL，以便一次爲每個標記而不是所有標記工作？

我沒有找到一個類似的問題就在這裏：

Multiple fancybox google map

然而，接縫使用攻擊同一個問題的不同的路線。另外，我似乎無法讓腳本自行工作，更不用說將其與我的代碼整合。所以，雖然我知道解決方案對他們是如何工作的，但它似乎並沒有幫助我。

我的代碼如下：

var map; 

var MY_MAPTYPE_ID = 'custom_style'; 

function initialize() { 

    var featureOpts = [ 
    { 
     stylers: [ 
     { hue: '#CCCCCC' }, 
     { saturation: '-100' },  
     { visibility: 'simplified' }, 
     { gamma: 2 }, 
     { weight: .4 } 
     ] 
    }, 
    { 
     elementType: 'labels', 
     stylers: [ 
     { visibility: 'off' } 
     ] 
    }, 
    { 
     featureType: 'water', 
     stylers: [ 
     { color: '#efefef' } 
     ] 
    } 
    ]; 

    var mapOptions = { 
    zoom: 9, 
    scrollwheel: false, 
    keyboardShortcuts: false, 
    disableDefaultUI: true, 
    center: new google.maps.LatLng(34.0531553, -84.3615928), 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
    }, 
    mapTypeId: MY_MAPTYPE_ID 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    var styledMapOptions = { 
    name: 'Custom Style' 
    }; 

    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 

setMarkers(map, schools); 
} 


var schools = [ 
    ['Canton', 34.2352063, -84.4846274, 4, 'popup.htm'], 
    ['Austell', 33.8158106, -84.6334938999999, 3, 'popup.htm'], 
    ['Marietta', 33.9578674, -84.5532791, 2, 'popup.htm'], 
    ['Atlanta', 33.7635085, -84.43030209999999, 1, 'popup2.htm'] 
]; 

function setMarkers(map, locations) { 

    var image = { 
    url: 'images/fml-home.png', 

    size: new google.maps.Size(67, 63), 

    origin: new google.maps.Point(0,0), 

    anchor: new google.maps.Point(0, 63) 
    }; 
    var shadow = { 
    url: 'images/fml-shadow.png', 

    size: new google.maps.Size(45, 18), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(0, 18) 
    }; 

    var shape = { 
     coord: [1, 1, 1, 67, 60, 67, 60 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var schools = locations[i]; 

    var myLatLng = new google.maps.LatLng(schools[1], schools[2]); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: schools[0], 
     zIndex: schools[3] 

    }); 

     var href = schools[4]; 

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

     $.fancybox({ 
    frameWidth : 800, 
    frameHeight : 600, 
    href : href, 
    type : 'iframe' 
     }); 
      }); 

} 

} 

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

Answer 1

試試這個：

marker["href"] = schools[4]; 

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

    $.fancybox({ 
     frameWidth : 800, 
     frameHeight : 600, 
     href : this.href, 
     type : 'iframe' 
    }); 
});