sexta-feira, 25 de novembro de 2011

Google Maps v3: Problema ao renderizar mapa oculto

Recentemente tive que implementar uma página com vários mapas do google, cada um dentro do seu separador (Tab).
O problema surgiu quando clico num separador, o mapa não renderiza como devia e não fica centrado na posição indicada.

A solução encontrada foi a seguinte:

Quando ocorre o clique no separador efectuar o seguinte:
  1. Guardar a posição.
  2. Disparar o evento resize para que o mapa redesenhe como devia.
  3. Centrar o mapa na posição que estava.

Aqui fica o código javascript com a solução.
function fixMap(map) {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
}

2 comentários:

  1. Olá Spikenc.
    Estou tendo o mesmo problema, meu mapa não aparece por completo e alinha o ponto no lado esquerdo.
    Como eu poderia aplicar seu código neste arquivo?


    ?>

    Agradeço deste já pela atenção.

    ResponderEliminar
  2. Olá, no evento de click do separador deves chamar o fixMap e passas por parâmetro o mapa do google maps.
    O truque é efectuar o fixMap assim que o mapa fica visível para que o Resize consiga calcular o tamanho do mapa.

    Espero ter ajudado :)

    ResponderEliminar