Apply style to googlemaps marker infowindow

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 integer shifts the box to the side of the maker, removes the backgrounds leaving only my div with the class "gm-style-iw", puts the close button in the right place, and puts the arrow on the side left side of the box from time to time.

This is the problem the arrow when the box opens for the first time is on the left side, after closing the box has some call that alra the div style (iwBackground.children (': nth-child (3)' )).

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

Does anyone know how to do this?

I tried to make the code in the codeopen, but there is no customization of the infowindow. Code to test Second code to test

Thank you guys.