Applying style to the infowindow of the googlemaps marketer

Question

I have the following method that applies a style to infowindow

google.maps.event.addListener(infowindow, 'domready', function () {

    // Referência ao DIV que agrupa o fundo da infowindow
    var iwOuter = $('.gm-style-iw');

    /* Uma vez que o div pretendido está numa posição anterior ao div .gm-style-iw.
     * Recorremos ao jQuery e criamos uma variável iwBackground,
     * e aproveitamos a referência já existente do .gm-style-iw para obter o div anterior com .prev().
     */
    var iwBackground = iwOuter.prev();

    // Remover o div da sombra do fundo
    iwBackground.children(':nth-child(2)').css({'display': 'none'});

    // Remover o div de fundo branco
    iwBackground.children(':nth-child(4)').css({'display': 'none'});

    // Desloca a infowindow 25px para a direita
    iwOuter.parent().parent().css({left: '175px', 'top': '150px'});

    // Remove a sombra da seta
    iwBackground.children(':nth-child(1)').attr('style', function (i, s) {
        return s + 'display: none;'
    });

    // Criar uma seta na margem esquerda
    iwBackground.children(':nth-child(3)').css({'position': 'absolute',
        'display': 'block',
        'content': "",
        'width': '0',
        'height': '0',
        'left': '-40px',
        'top': '125px',
        'border': '20px solid transparent',
        'border-right-color': 'rgb(209, 92, 43)'
    });

    // Remove a seta antiga da infowindow
    iwBackground.children(':nth-child(3)').children(':nth-child(1)').css({'display': 'none'});
    iwBackground.children(':nth-child(3)').children(':nth-child(2)').css({'display': 'none'});

    // Referência ao DIV que agrupa os elementos do botão fechar
    var iwCloseBtn = iwOuter.next();

    // Aplica o efeito desejado ao botão fechar
    iwCloseBtn.css({
        opacity: '1',
        height: '25px',
        width: '25px',
        left: '-20px',
        top: '0px',
        'z-index': '2',
        border: '1px solid rgb(209, 92, 43)',
        'border-radius': '25px',
        'box-shadow': '0 0 5px rgb(209, 92, 43)'
    });

    var imgClose = iwCloseBtn.children('img');

    imgClose.css({
        'position': 'relative',
        'left': '0',
        'top': '0',
        'width': '23px',
        'height': '23px'
    });

    imgClose.attr('src', img_close_pin);


    iwOuter.css({
        width: 'auto !important'
    });

    // A API aplica automaticamente 0.7 de opacidade ao botão após o evento mouseout. Esta função reverte esse evento para o valor desejado.
    iwCloseBtn.mouseout(function () {
        $(this).css({opacity: '0.5'});
    });
});

It works almost whole moves the box to the maker’s side, removes the backgrounds leaving only my div with the "gm-style-Iw" class, puts the close button in the right place, and puts the arrow on the left side of the box once in a while.

That’s the problem the arrow when the box opens for the first time it is on the left side, after I close the box has some call that will style the div (iwBackground.children(':nth-child(3)')).

What I realized is that there is some event being called after the 'domready' that repositions the arrow. Ai instead of it is in the top: 125px; left: -40px she’s going to top: 238px; left: 117px;. And some other event that when the infowindow is closed the arrow goes to top: 36px; left: 17px;. I’ve already tested the events of infowindow: 'position_changed', 'content_changed', 'closeclick', 'zindex_changed'.

Someone knows how to do it?

I tried to make the code in the codeopen, but there does not work any customization of infowindow. Code to test Second code to test

Thank you very much, guys.