How to target element on a Google Maps custom InfoBox?

Question

I have created a custom close button for the InfoBox, but I cannot get it to close. I have tried to create an eventlistener for when the box is clicked, but no luck so far. The code is as follows:

    InfoPopupbox.prototype = new google.maps.OverlayView();

    InfoPopupbox.prototype.onAdd = function() {
        //add is after the map has been initiated
        var div = document.createElement('div');
        var classname = "infoWrapper ";
        if (this.customclass){
            classname += this.customclass;
        }
        div.className = classname ;
        div.style.border = "none";
        div.style.borderWidth = "0px";
        div.style.position = "absolute";

        div.appendChild(this.content_);
        this.div_ = div;

        var panes = this.getPanes();
        //panes.overlayLayer.appendChild(div);

        //float the Pane above the map
        panes.floatPane.appendChild(div);

        google.maps.event.addListener( this , 'click' , function(){
            console.log('click close');
            that.infotoggle();
        });

    };

Answer 1

You want to use addDomListener instead of addListener for click, and you'll need to bind it to the DOM Element:

google.maps.event.addDomListener(this.div, 'click', function() { ... });