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

时间:2016-04-27 10:47:03

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

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

从代码中,我创建了自己的关闭按钮,该按钮附加到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

你能帮我解决一下吗?任何形式的帮助将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:3)

  1. 您说您使用addDomListener添加了事件监听器,但您的代码显示使用了addListener

  2. 识别关闭按钮的方式不正确。简单看一下你的javascript控制台应该告诉你。请改用closeBtn[0]

  3. 所以完整的代码是:

    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