从Google地图中的事件监听器调用Fancybox而不是默认的Infowindow

问题描述

我希望用Fancybox叠加层来替换默认的Google Maps API InfoWindow。

版本

Google Maps API 3.0

目标 用Fancybox弹出框替换默认的Infowindow

用例

1. Google地图全屏加载（100％100％）
   
2. 标记放置在地图上


3. 用户点击一个标记，并显示一个覆盖地图的Fancybox弹出窗口
   
4. 用户单击Fancybox右上角的X关闭它

我对如何最好地解决这个问题感到茫然。使用addListener事件处理程序调用Fancybox最简单，将标记作为参数传入？如果是这样，你们如何推荐这样做？

例如：

 //调用Fancybox，但是怎么做？
}）;} code $ c> google.maps.event.addListener（marker，'click'，function 
  

预先感谢您，

Graham Kennedy

解决方案

我发现最好的方法是使用Fancybox的 href 方法。

function addMarker（data）{

//建立窗口内容
var contentForBox = data;

google.maps.event.addListener（marker，'click'，function（）{

$ .fancybox（{
href：contentForBox
//其他选项
}）;


}）;
}


I'm looking to replace the default Google Maps API InfoWindow with a Fancybox overlay.

Version

Google Maps API 3.0

Goal

Replace the default Infowindow with a Fancybox popup

Use Case

1. Google map is loaded up in full screen (100% by 100%)
2. Markers are placed onto the map
3. User clicks on a marker and is shown a Fancybox popup that overlays the map
4. User clicks on "X" in the top right hand corner of the Fancybox to close it

I'm at a loss as to how best to tackle this. Is it easiest to call Fancybox using the addListener event handler, passing in the marker as a parameter? If so, how would any of you recommend doing this?

For example:

google.maps.event.addListener(marker, 'click', function(){
    // Call Fancybox, but how?
});

Thank you in advance,

Graham Kennedy

解决方案

I've found that the best way to go about this is to pass in your content manually with Fancybox's href method. Works like a charm for me.

function addMarker(data) {

    // build the window contents
    var contentForBox = data;

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

        $.fancybox({
            href: contentForBox
            // other options
        });


    });
}

这篇关于从Google地图中的事件监听器调用Fancybox而不是默认的Infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！