Problemas com as guias da interface do usuário da API do Google Maps v3 + jQuery
Há vários problemas, que parecem ser bastante conhecidos, ao usar a API do Google Maps para renderizar um mapa em uma guia da interface do usuário do jQuery. Eu vi perguntas do SO postadas sobre problemas semelhantes (Aqui eAqui, por exemplo), mas as soluções parecem funcionar apenas para v2 da API do Google Maps. Outras referências que verifiquei sãoAqui eAqui, juntamente com praticamente tudo que eu poderia desenterrar pesquisando.
Eu tenho tentado encher um mapa (usando v3 da API) em uma guia jQuery com resultados mistos. Eu estou usando as últimas versões de tudo (atualmente jQuery 1.3.2, jQuery UI 1.7.2, não sei sobre o Maps).
Esta é a marcação e javascript:
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
e
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initializeMap();
google.maps.event.trigger(map, 'resize');
}
});
});
function initializeMap() {
// Just some canned map for now
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#map_canvas')[0], myOptions);
}
E aqui está o que eu descobri que funciona / não funcionapara a API do Google Maps v3):
Usar a técnica off-left, conforme descrito na documentação do jQuery UI Tabs (e nas respostas para as duas perguntas que eu vinculei), não funciona. Na verdade, o código de melhor funcionamento usa o CSS.ui-tabs .ui-tabs-hide { display: none; } em vez de.A única maneira de obter um mapa para exibir em uma guia é definir a largura e a altura do CSS#map_canvas ser valores absolutos. Alterando a largura e a altura paraauto ou100% faz com que o mapa não seja exibido, mesmo que já tenha sido renderizado com sucesso (usando largura e altura absolutas).Não consegui encontrá-lo documentado em nenhum lugar fora da API do Google Maps, masmap.checkResize() não vai mais funcionar. Em vez disso, você deve disparar um evento de redimensionamento chamandogoogle.maps.event.trigger(map, 'resize').Se o mapa não for inicializado dentro de uma função ligada a umtabsshow evento, o próprio mapa é renderizado corretamente, mas os controles não são - a maioria está simplesmente ausente.Então, aqui estão as minhas questões:
Alguém mais tem experiência em realizar esse mesmo feito? Em caso afirmativo, como você descobriu o que realmente funcionaria, pois os truques documentados não funcionam na API do Google Maps v3?Que tal carregar o conteúdo da aba usando Ajax conforme odocs de IU do jQuery? Eu não tive a chance de brincar com isso, mas meu palpite é que isso vai quebrar o Maps ainda mais. Quais são as chances de fazê-lo funcionar (ou não vale a pena tentar)?Como faço para que o mapa preencha a maior área possível? Eu gostaria que ele preenchesse a guia e se adaptasse aos redimensionamentos de página, da mesma forma que é feito em maps.google.com. Mas, como eu disse, parece que estou preso a aplicar apenas CSS absoluto de largura e altura ao mapa div.Desculpe se isso foi prolixo, mas essa pode ser a única documentação das guias da API do Google Maps v3 + jQuery. Felicidades!