0

Tenho o seguinte método que aplica um estilo ao 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'});
    });
});

Ele funciona quase inteiro desloca a caixa para a latera do maker, remove os fundos deixando apenas a minha div com a classe "gm-style-iw", coloca o botão de fechar no lugar certo, e coloca a seta na lateral esquerda da caixa de vez em quando.

Esse é o problema a seta quando a caixa abre pela primeira vez ela esta na lateral esquerda, depois que fecho a caixa tem alguma chamda que altra o style da div (iwBackground.children(':nth-child(3)')).

Pelo que percebi é que tem algum evento sendo chamado depois do 'domready' que reposiciona a seta. Ai em vez de ela fica no top: 125px; left: -40px ela vai para top: 238px; left: 117px;. E algum outro evento que quando o infowindow é fechado a seta vai para top: 36px; left: 17px;. Eu já testei os evento do infowindow: 'position_changed', 'content_changed', 'closeclick', 'zindex_changed'.

Alguem sabe como fazer isso?

Tentei fazer o codigo no codeopen, mas lá não funciona nada da customização da infowindow. Codigo para testar Segundo codigo para testar

Muito Obrigado galera.

2
  • Bota um MCVE, tem como? Fica mais fácil de te ajudar, qualquer coisa com fake data mesmo. Commented 10/12/2015 às 18:05
  • Então esse link que coloquei é mais ou menos algo que da para editar, mas não funciona na nele. É isso o tal do MCVE? Commented 10/12/2015 às 18:10

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .