从Google地图中的事件监听器调用Fancybox而不是默认的Infowindow [英] Calling Fancybox from Event Listener in Google Maps Instead of Default 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！