InfoWindowsのカスタムクローズボタンにGoogleマップのイベントリスナーを追加します。

Question

現在、私は自分のカスタムInfoウィンドウをGoogle Mapsに実装しようとしています。私は5 ways to customize Google's InfoWindowについてかなり良いチュートリアルを見つけました。チュートリアルから私は独自のカスタムInfo Windowを作成することができましたが、Info Windowに独自の閉じるボタンを実装することはできませんでした。

コードから、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

あなたは解決策で私を助けていただけますか？どんな種類の助けにも感謝します。ありがとう！

Answer 1

1. あなたはaddDomListenerを使用してイベントリスナーを追加すると言うが、あなたのコードではなくaddListenerの使用を示しています。

2. 閉じるボタンを識別する方法が正しくありません。あなたの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