Hinzufügen von Google Maps Ereignis-Listener zu benutzerdefinierten Schließen-Taste in InfoWindows

Question

derzeit versuche ich meine eigenen benutzerdefinierten Info Windows in Google Maps zu implementieren. Ich habe ein ziemlich gutes Tutorial über 5 ways to customize Google's InfoWindow gefunden. Aus dem Tutorial habe ich erfolgreich mein eigenes Info-Fenster erstellt, aber ich konnte meine eigene Schließen-Schaltfläche in den Info-Fenstern nicht implementieren.

Aus den Codes habe ich meine eigene Schaltfläche zum Schließen erstellt, die an den Inhalt von InfoWindows angehängt ist.

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

Und dann Ereignis-Listener auf das Element mit maps.google.event.addDomListener() ich hinzufügen:

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

Aber es funktioniert nicht, wenn ich versuchte, das klicken Element (das Protokoll erscheint auch nicht).

Hier ist meine ganze Beispielcode mit codepen.io: http://codepen.io/dannypranoto/pen/PNdvzb

Könnten Sie mir bitte helfen mit einer Lösung? Jede Art von Hilfe wird geschätzt. Vielen Dank!

Answer 1

1. Sie sagen, Sie den Ereignis-Listener addDomListener mit hinzufügen, aber Ihr Code zeigt die Verwendung von addListener statt.

2. Die Art und Weise, wie Sie Ihre Schließen-Schaltfläche identifizieren, ist nicht korrekt. Ein einfacher Blick auf Ihre JavaScript-Konsole sollte Ihnen das sagen. Verwenden Sie stattdessen closeBtn[0].

So ist der vollständige Code wäre:

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