Google Maps InfoWindow, Undo styling on childelements using jQuery

Question

Hello dear Stackoverflowers!

Like many other InfoWindow threads i am looking for a way to Customize InfoWindow.
NOTE: There are technical reasons why i cant simply use infobubble and infobox!

And i came across a rather stiff solution throu this guide: http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html (hope the link never dies, you can download an example from the download button next to the demobutton)

What it does is it "removes" the outer content of the infowindowcontent, which is what i want. But it goes far beyond that, whenever i click on my markers and the infowindow pops up, it sets the same styling to ALL OTHER INFOWINDOWS on the map.

function customizeInfoWindow(infowindow) {
    google.maps.event.addListener(infowindow, 'domready', function () {
        var iwOuter = $('.gm-style-iw');
        var iwBackground = iwOuter.prev();

        iwBackground.children(':nth-child(2)').css({ 'display': 'none' }); // Removes BoxShadow
        iwBackground.children(':nth-child(4)').css({ 'display': 'none' }); // Removes WhiteBox
    });
}

Given that, to my knowledge, it's my only real option of removing the outer content from my InfoWindow. Whith that, i chose to go with this option. By customization i got what i wanted, but some unwanted features came along with this "fix".

Right now i am trying to fix this by restoring the styling whenever i close the infowindow(clicking somewhere else on the map). I am trying something like this:

function undoCustomization(map) {
    google.maps.event.addListener(map, 'domready', function () {
        var iwOuter = $('.gm-style-iw');
        var iwBackground = iwOuter.prev();

        iwBackground.children(':nth-child(2)').css({ 'display': 'block' }); // Add BoxShadow
        iwBackground.children(':nth-child(4)').css({ 'display': 'block' }); // Add WhiteBox

    });
}

But that doesent seem to work. Anyone has some advice of how i might advance from here?

Answer 1

I would strongly advise against making any assumptions the DOM structure of the Infowindow itself. The API makes no guarantees about how the Infowindow is composed, and things such as class names, element hierarchy and CSS styling is subject to change at any point. If you go down this path it is likely that your solution will stop working sometime in the future without warning.

If you want to play with the appearance of your Infowindow, a custom infowindow implementation is a much better idea. See Google Maps: How to create a custom InfoWindow? for some ideas of where to start.