ti-enxame.com

O Google Map não está carregando corretamente dentro da guia Bootstrap

Estou usando o iProperty para criar guias com conteúdo para diferentes proprietários.

Eu hackeei muito os arquivos principais para fazer o site parecer e funcionar como eu quero, mas estou tendo um problema com os mapas nas guias.

Se você olhar a página abaixo e clicar na guia Localização, verá o problema pelo qual ele carrega apenas uma pequena parte do mapa. Aliás, o problema desaparece se você redimensionar o navegador enquanto a guia do mapa estiver ativa, então acho que há algum problema quando o mapa é carregado inicialmente.

http://red-ferndevelopment.co.uk/OfficeExperts/index.php?option=com_iproperty&view=property&id=90&Itemid=318

Se alguém pudesse ajudar, ficaria mais do que agradecido.

Muito obrigado, Austin

2
Austin

Primeiro, o motivo pelo qual o redimensionamento é corrigido é que o mapa verifica se tudo está "correto" no redimensionamento do navegador. Como a guia está oculta por padrão, o tamanho do mapa é menor até que a guia seja aberta, mas nenhum evento está sendo enviado ao mapa para notificar a alteração. Eu já vi problemas semelhantes com o Google Maps antes e não é realmente um problema, apenas algo que pode ser esquecido facilmente.

Existem algumas correções para isso, a primeira é chamar map.checkResize() quando a guia é aberta. Embora dado, é um componente de terceiros que pode não ser fácil, mas se já foram feitas as principais modificações, isso pode não ser um problema. Substitua map pela variável real do mapa.

A segunda maneira mais fácil de "enganá-lo" sem tocá-lo é simplesmente fazer algo assim:

jQuery('a[href="#propmap"]').on('click',function(){
   jQuery(window).trigger('resize');
});

Você pode colocá-lo em qualquer lugar (desde que o DOM tenha carregado, é claro) e deve corrigi-lo. Ele aciona um evento de redimensionamento automaticamente quando a guia é clicada, portanto, deve forçar o mapa a funcionar sem um redimensionamento manual.

A primeira sugestão é a melhor, pois não existe nenhum tipo de "hack", mas a segunda deve funcionar, não importa o quê.

5
Jordan Ramstad

As guias de inicialização (e carrosséis e modais) são inicialmente definidas para não exibir nenhuma, até que se tornem ativas, para que o elemento pai do seu mapa tenha altura/largura 0.

A melhor maneira de resolver isso é chamar o script do mapa após a guia ter sido exibida, e não no documento pronto. No documento pronto, não há nada para carregar seu mapa no que diz respeito ao navegador.

O Bootstrap fornece um método para fazer isso com o evento mostrado.bs.tab http://getbootstrap.com/javascript/#tabs

Então, você simplesmente precisa de algo assim que instancia o mapa após a guia terminar de ser exibida:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Your Google map code here
});
2
Seth Warburton

Seth Warburton escreveu: Bootstrap (e carrosséis e modais) são inicialmente configurados para não exibirem nada, até que se tornem ativos, para que o elemento pai do seu mapa tenha altura/largura 0.

Eu tive o mesmo problema com o Bootstrap3 que você. finalmente, acabei com a solução CSS simples.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}
1
ND_

Você pode adicionar esta declaração css para evitar conflitos no Bootstrap/Google Map (se o ID do seu mapa for #map). Em alguns casos, resolve o problema:

#map img {
    max-width: none;
}

Mas, talvez você precise carregar o script de mapa apenas quando a guia for exibida.

$('a[href="#propmap"]').on('shown', function() {
    // When tab is displayed... will run google map code
    // Your Google map code here
}

Espero que isso possa ajudar!

0
Cyril