Creating a custom close button for a Google Maps InfoBox

Question

I want to create a custom close button for my InfoBox windows, without using the built in functionality (I have one InfoBox that doesn't need a close button, which is why I need this work around).

Usually I would do something like this to close a marker:

google.maps.event.addListener(map, 'click', function(){
    aMarker.close(map, marker);
}); 

But doing something similar with an element within the InfoBox doesn't work, like so:

var closeInfoBox = document.getElementById("close-button");
google.maps.event.addListener(closeInfoBox, 'click', function(){
    aMarker.close(map, marker);
});

Is there a way to close an InfoBox using an element within the InfoBox itself?

Edit: no event handlers can be called from within the InfoBox at all it seems. Is there a way to do this?

Answer 1

Try addDomListener instead of addListener. Ex:

 var closeInfoBox = document.getElementById("close-button");
 google.maps.event.addDomListener(closeInfoBox, 'click', function(){
     aMarker.close(map, marker);
 });

Answer 2

Ok, it's quite old question, but since it is popular in search engine I will try to answer.

If you want to hide InfoBox standard close button simply add this stylesheet:

.infoBox > img { display: none; }

Then create some listener to identify your current InfoBox as @ManseUk mentioned and call close method.