在Google Maps API中使用InfoBubble.js中的fancyBox [英] Using fancyBox inside InfoBubble.js with Google Maps API

问题描述

我似乎无法获得 fancyBox 加载 InfoBubble （即我的信息窗口）。我在InfoBubble里面有一个按钮，当点击它时，应该使用fancyBox显示一个图像。我遇到过以前的此处以及其他一些问题，但这些解决方案都不适合我。

我设置的方式如下。在 index.html 中：

 < script src =jquery- 1.11.1.min.js>< /脚本> 
< script src =http://maps.google.com/maps/api/js?sensor=false>< / script> 
< script src =map.js>< / script> 
< script src =jquery.fancybox.pack.js>< / script> 
< script src =infobubble.js>< / script> 
< script> 
 $（document）.ready（function（）{
 $（。dialog）。fancybox（{width：'50％'，height：'50％'，closeClick：true}）; 
}）; 
< / script> 
  

在 map.js 中：

  infoBubble = new InfoBubble（{
 maxWidth：200，
 content：'< a class =dialog href =preview.jpgtarget =_ blank> 
< img src =button-icon.png/>< / a>'，
 position：new google.maps .LatLng（-34.397,150.644）
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infoBubble.open（map，marker）; 
  

通过引用CSS类 .dialog ，它不应该工作，因为脚本已经存在在 index.html 页面中，它不起作用，而只是在新页面中重定向到图片。

解决方案

您需要等待InfoBubble的domready事件在运行之前触发：

  $（。dialog）。fancybox（{width：'50％'，height：'50％'，closeClick：true}）; 
  

示例jsfiddle

  google.maps.event.addListener（marker，'click'，function（）{
 infoBubble.open（map，marker）; 
 google.maps.event.addListenerOnce（infoBubble，'domready'，function（）{
 $（。dialog）。fancybox（{
 width： '200px'，
 height：'200px'，
 closeClick：true 
}）; 
}）; 
}）; 
  

I can't seem to get fancyBox to load inside the InfoBubble (i.e., my info window). I have a button inside the InfoBubble, which when clicked, should display an image using fancyBox. I have come across previous questions here and few others, but none of those solutions worked for me.

The way I have it set up is as follows. In index.html:

<script src="jquery-1.11.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="map.js"></script>
<script src="jquery.fancybox.pack.js"></script>
<script src="infobubble.js"></script>
<script>
$(document).ready(function() {
    $(".dialog").fancybox({ width: '50%', height: '50%', closeClick: true });
});    
</script>

In map.js:

infoBubble = new InfoBubble({
        maxWidth: 200,
        content: '<a class="dialog" href="preview.jpg" target="_blank">
                  <img src="button-icon.png"/></a>',
        position: new google.maps.LatLng(-34.397, 150.644)
});

google.maps.event.addListener(marker, 'click', function() {
    infoBubble.open(map, marker);

By referencing the CSS class .dialog, shouldn't it work because the script is already there in the index.html page? It doesn't work. Instead I am just redirected to the image in a new page.

解决方案

You need to wait for the domready event of the InfoBubble to fire before running this:

$(".dialog").fancybox({ width: '50%', height: '50%', closeClick: true });

example jsfiddle

google.maps.event.addListener(marker, 'click', function () {
    infoBubble.open(map, marker);
    google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
        $(".dialog").fancybox({
            width: '200px',
            height: '200px',
            closeClick: true
        });
    });
});

这篇关于在Google Maps API中使用InfoBubble.js中的fancyBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！