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.