Google maps api 3 放大弹出窗口无法从谷歌地图信息框内的按钮打开

我有一个信息框，当点击谷歌地图标记时会打开。在信息框内有一个按钮“#打开弹出窗口”，单击该按钮时应打开一个放大的弹出模式窗口，但什么也没有发生

作为一个测试，我在包含谷歌地图的div外放置了相同的按钮，它会打开模式窗口，但只有在第二次单击时才会打开！发生了什么事

我已经试了好几天了，但都有最严重的副作用

任何帮助都将不胜感激

信息框内按钮的HTML：

<div style=...>
<centre>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
</center>
</div>

打开弹出窗口
内联弹出窗口

google maps div外部按钮的HTML：

<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>

打开弹出窗口
内联弹出窗口

JS:

myapp.triggerClick=函数（）{
google.maps.event.trigger（gmarkers[id]，“点击”）
};
var infoboxOptions={
内容：“”
，disableAutoPan:false
，alignBottom:true
，最大宽度：0
，pixelOffset:new google.maps.Size（0,0）
，zIndex:1000
，箱式：{
背景：“”
，不透明度：0.9
}
，closeBoxMargin:“4px4px0”
，closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif"
，infoBoxClearance:new google.maps.Size（1,1）
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:false
};
var ib=新信息框（信息框选项）；
函数createMarker（latlng、html、id）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图
//zIndex:Math.round（latlng.lat（）*-100000）尝试将jQuery单击事件放置在地图事件侦听器中，该侦听器设置为在单击信息框时触发。需要地图事件侦听器，因为谷歌地图中的单击事件由谷歌地图API处理

对你来说，比如：

window.google.maps.event.addListener(ib, "domready", function () {
    $('#open-popup').on('click', function () {
        $(this).magnificPopup({
          items: {
            src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
          },
          type: 'image' // this is default type
        });
    });
});

请注意，我还为您的点击事件更新了选择器。您可能希望使用它，因为通常的
on
选择器语法在我的情况下不起作用，例如
$（'.preExistingElementSelector'）。on（'click'，'.dynamicElementSelector'，function（）{}）；

每次显示和删除信息框时，它都会从dom中动态添加和删除
关闭。因此，上述函数的基本作用是，在新的infobox实例添加到dom（即可见）后，将此新的单击事件添加到它。一旦关闭该infobox，它将从dom中删除，这也意味着附加到它的事件处理程序也将消失。这就是为什么我们每次都添加一个新的事件处理程序

我相信可能有一个更整洁的解决方案，我只是还没来得及找到一个

另外，请确保在信息框选项中保留
enableeventprogation:false
，这样点击事件就不会被谷歌地图吞没

更新

以下是一个工作示例：

你真正需要的是能够通过API打开放大弹出窗口，所以我所做的唯一改变就是改变

$(this).magnificPopup({...});

到

这就解决了问题

window.google.maps.event.addListener(ib, "domready", function () {       
    $('.open-popup').on('click', function () {
        // Open magnificPopup through API
        // See http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type
        $.magnificPopup.open({
            items: {
                src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg/180px-0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg'
            },
            type: 'image' // this is default type
        });

    });
});

尝试将jQuery click事件放置在地图事件监听器中，该监听器设置为在单击信息框时触发。需要一个地图事件监听器，因为谷歌地图中的单击事件由谷歌地图API处理

对你来说，比如：

window.google.maps.event.addListener(ib, "domready", function () {
    $('#open-popup').on('click', function () {
        $(this).magnificPopup({
          items: {
            src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
          },
          type: 'image' // this is default type
        });
    });
});

请注意，我还为您的点击事件更新了选择器。您可能希望使用它，因为通常的
on
选择器语法在我的情况下不起作用，例如
$（'.preExistingElementSelector'）。on（'click'，'.dynamicElementSelector'，function（）{}）；

每次显示和删除信息框时，它都会从dom中动态添加和删除
关闭。因此，上述函数的基本作用是，在新的infobox实例添加到dom（即可见）后，将此新的单击事件添加到它。一旦关闭该infobox，它将从dom中删除，这也意味着附加到它的事件处理程序也将消失。这就是为什么我们每次都添加一个新的事件处理程序

我相信可能有一个更整洁的解决方案，我只是还没来得及找到一个

另外，请确保在信息框选项中保留
enableeventprogation:false
，这样点击事件就不会被谷歌地图吞没

更新

以下是一个工作示例：

你真正需要的是能够通过API打开放大弹出窗口，所以我所做的唯一改变就是改变

$(this).magnificPopup({...});

到

这就解决了问题

window.google.maps.event.addListener(ib, "domready", function () {       
    $('.open-popup').on('click', function () {
        // Open magnificPopup through API
        // See http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type
        $.magnificPopup.open({
            items: {
                src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg/180px-0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg'
            },
            type: 'image' // this is default type
        });

    });
});

谢谢，它有点工作了……现在弹出窗口只打开了一秒钟，然后再点击。第一次点击对每个信息框都不起作用。@asier_js设置了一个JSFIDLE或Plunker，我来看看。@asier_js我想你忘了包含放大弹出窗口的代码，因为JSFIDLE只是信息框示例之一？很抱歉。第一次我使用了JSFIDLE，没有保存！这里是@asier_js，我用一个有效的解决方案更新了我的答案。另外，我建议你用你的脚本删除下面的额外帖子；它不是必需的，因为你提供了一个JSFIDLE，而且它违反了堆栈规则。谢谢，它有点工作了……现在弹出窗口只打开了第二次并进一步单击。第一次单击就可以了不适用于每个信息框。@asier_js设置了一个JSFIDLE或PLUNK，我来看看。@asier_js我想你忘了包含放大弹出窗口的代码，因为JSFIDLE只是信息框示例之一？很抱歉。我第一次使用JSFIDLE时没有保存！这是@asier_js，我用一个有效的解决方案更新了我的答案。还有，我建议您删除下面用脚本编写的额外帖子；因为您提供了JSFIDLE，所以不需要它，而且它违反了堆栈规则。