将谷歌地图事件侦听器添加到 InfoWindows 中的自定义关闭按钮答案

【问题标题】：Add google maps event listener to custom close button in InfoWindows将谷歌地图事件侦听器添加到 InfoWindows 中的自定义关闭按钮
【发布时间】：2016-04-27 10:47:03
【问题描述】：

目前我正在尝试在 Google 地图中实现我自己的自定义信息窗口。我找到了一个关于5 ways to customize Google's InfoWindow 的很好的教程。从教程中，我成功创建了自己的自定义信息窗口，但是我无法在信息窗口中实现自己的关闭按钮。

根据代码，我创建了自己的关闭按钮，附加到 InfoWindows 的内容。

<span id="iw-close-btn"><i class="fa fa-lg fa-times white"></i></span>

然后我使用 maps.google.event.addDomListener() 向元素添加事件监听器：

var closeBtn = $('#iw-close-btn').get();
google.maps.event.addListener(closeBtn, 'click', function() {
   console.log('closed');
   infowindow.close();
});

但是每当我尝试单击该元素时它都不起作用（日志也没有出现）。

这是我使用 codepen.io 的整个示例代码： http://codepen.io/dannypranoto/pen/PNdvzb

您能帮我解决一下吗？任何形式的帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript google-maps-api-3 infowindow

【解决方案1】：

您说您使用addDomListener 添加事件侦听器，但您的代码显示使用addListener。
您识别关闭按钮的方式不正确。简单看一下您的 javascript 控制台应该会告诉您这一点。请改用closeBtn[0]。

所以完整的代码是：

google.maps.event.addListener(infowindow, 'domready', function() {

    var closeBtn = $('#iw-close-btn').get();

    google.maps.event.addDomListener(closeBtn[0], 'click', function() {

        infowindow.close();
    });
});

Updated Codepen

【讨论】：