Javascript 需要谷歌地图打开多个标记弹出窗口与Fancybox

我正在创建一个带有多个标记的谷歌地图，我想在点击时将其弹出到Fancybox灯箱中。我必须承认，我在javascript和谷歌地图API方面是个新手

我已经将一些不同的示例脚本放在一起，并提出了一些实际运行良好的方法。我有我想要的方式的标记（好吧，没有标题…我还需要弄清楚），我想要的方式的地图样式，我甚至有在点击时弹出灯箱的标记

但是，所有标记最后都会在lightbox中打开一个URL。我想这有点道理。Fancybox代码正在分发给所有标记，而不是单独分发给每个标记。我试图用一个url进行另一个参数，并将其传递到Fancybox脚本中，但它仍然只拾取最后一个标记的url，并将其用于所有标记。我如何才能让URL同时为每个标记而不是所有标记工作

我确实在这里发现了一个类似的问题：

然而，使用不同的途径来解决同一问题是非常必要的。另外，我似乎无法让他们的脚本自行运行，更不用说将其与我的代码集成。所以，虽然我知道了解决方案对他们的作用，但它似乎对我没有帮助

我的代码如下：

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

var映射；
var MY_MAPTYPE_ID='custom_style'；
函数初始化（）{
变量特性选项=[
{
样式：[
{色调：'#中交'}，
{饱和：'-100'}，
{可见性：'简化'}，
{gamma:2}，
{权重：.4}
]
},
{
elementType:'标签'，
样式：[
{可见性：“关闭”}
]
},
{
功能类型：“水”，
样式：[
{颜色：'#efefef'}
]
}
];
变量映射选项={
缩放：9，
滚轮：错误，
键盘快捷键：false，
disableDefaultUI:true，
中心：新google.maps.LatLng（34.0531553，-84.3615928），
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，我的地图类型]
},
mapTypeId:MY_MAPTYPE_ID
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var styledMapOptions={
名称：“自定义样式”
};
var customMapType=new google.maps.StyledMapType（featureOpts，styledMapOptions）；
map.mapTypes.set（MY\u MAPTYPE\u ID，customMapType）；
设置标记（地图、学校）；
}
var学校=[
[Canton'，34.2352063，-84.4846274,4，'popup.htm']，
[Austell'，33.8158106，-84.633493899999,3，'popup.htm']，
[Marietta'，33.9578674，-84.5532791,2，'popup.htm']，
[Atlanta'，33.7635085，-84.430302099999，1，'popup2.htm']
];
功能设置标记（地图、位置）{
变量图像={
url:'images/fml home.png'，
尺寸：新谷歌地图尺寸（67,63），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（0,63）
};
变量阴影={
url:'images/fml shadow.png'，
尺寸：新谷歌地图尺寸（45,18），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（0,18）
};
变量形状={
坐标：[1,1,1,67,60,67,60,1]，
类型：“poly”
};
对于（变量i=0；i

试试这个：

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

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

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

试试这个：

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

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

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

---

我想问题就在这里

var href=schools[4]

…我想应该是

var href=schools[I][4]同样
frameWidth
应该是
width
并且
frameHeight
应该是
height
也应该是
title:schools[0]
通过
title:schools[i][0]
和
zIndex:schools[3]
通过
zIndex:schools[i][3]
感谢您的指点。我最初在那里使用了宽度/高度，但它似乎对灯箱没有任何影响。所以，我只是尽我所能。还有，我试过你的其他解决方案。在
学校
和
[#]
之间插入
[I]
的问题是（这似乎是有道理的），它不仅不能解决问题，而且还会将标记分解到只有第一个标记出现的位置。其他人消失了。有没有其他方法可以使用
schools[i]
然后使用其他格式的add参数号？
在schools和[#]之间插入[i]（这似乎很有意义）
。。。。这对我来说是有意义的：。。。可能问题是您正在覆盖var
schools=locations[i]
我想问题就在这里
var href=schools[4]
…我想应该是
var href=schools[I][4]同样
frameWidth
应该是
width
并且
frameHeight
应该是
height
也应该是
title:schools[0]
通过
title:schools[i][0]
和
zIndex:schools[3]
通过
zIndex:schools[i][3]
感谢您的指点。我最初在那里使用了宽度/高度，但它似乎对灯箱没有任何影响。所以，我只是尽我所能。还有，我试过你的其他解决方案。在
学校
和
[#]
之间插入
[I]
（这似乎是有道理的）的问题是，它不仅不能解决问题，而且还会将标记破坏到只有第一个标记的位置