Exibição do Google Maps: nenhum problema

Estou tentando configurar um mapa do Google que será exibido quando um link for clicado e, em seguida, oculto quando outro link for clicado. Tudo funciona bem, exceto quando mostro o mapa no display: none, ele não é exibido corretamente.

Eu li sobre o uso do google.maps.event.trigger (map, ‘resize’); mas eu não sou proficiente o suficiente com Javascript e JQuery para saber como adicioná-lo.

Aqui está o código que eu tenho usado:

     #viewmap { position:relative; width:944px; float:left; display:none; } #hidemap { position:relative; width:944px; float:left; display:block; } #map_canvas { position:relative; float:left; width:944px; height:300px; }     function initialize() { var latlng = new google.maps.LatLng(-27.999673,153.42855); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var contentString = 'blah'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize);   function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } }        

Qualquer ajuda seria muito apreciada,

Quintin

Este problema também acontece com as abas jquery, ao invés de aplicar “display: none”, você pode tentar esconder o mapa desta maneira:

Adicione os estilos a seguir quando estiver tentando ocultar o mapa, em vez de usar display: none

 position: absolute; left: -100%; 

Você também pode adicionar transições como: transition: left 1s ease;

Você pode tentar com o ouvinte de evento do Google acionando-o depois de exibir o mapa:

   

Eu me deparei com o mesmo problema hoje e acabei encontrando isso na referência oficial da API Javascript do Google Maps V3 :

Os desenvolvedores devem acionar esse evento no mapa quando o div mudar de tamanho: google.maps.event.trigger(map, 'resize') .

Como display:none é equivalente a deixar o

com tamanho 0, alterando-o para display:block torna-se de fato uma mudança de tamanho, tornando necessário triggersr o evento de redimensionamento do mapa.

Caiu como uma luva para mim.

ATUALIZAÇÃO 2018-05-22

Com um novo release de renderizador na versão 3.32 da API JavaScript do Google Maps, o evento de redimensionamento não faz mais parte da class Map .

A documentação afirma

Quando o mapa é redimensionado, o centro do mapa é fixo

  • O controle de canvas inteira agora preserva o centro.

  • Não há mais necessidade de acionar o evento de redimensionamento manualmente.

fonte: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); não tem nenhum efeito a partir da versão 3.32

O problema com o tamanho do mapa é que ele precisa saber o tamanho do div para o qual está renderizando. No momento você está inicializando um mapa na carga do documento quando seu div está oculto para que o mapa não possa calcular seu tamanho corretamente – para resolver este problema você simplesmente precisa inicializá-lo na primeira vez que mostrar o div (não onload).

              

Basta inicializar o mapa quando quiser exibi-lo. Eu tive o mesmo problema e resolvi dessa maneira.

Remova esta linha:

 google.maps.event.addDomListener(window, 'load', initialize); 

E mude o script toggleDiv desta maneira:

 function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; initialize(); } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } } 

.map_container {display: none;}

 $('.show_hide').click(function(){ $('.map_container').toggle({ complete:function (){ google.maps.event.trigger(map, 'resize'); }, duration:'slow' }); }) 

Você realmente melhor usando a técnica off-left !
Aqui estão minhas edições:

               

Exemplo de link .

Bastante simples … no momento em que você inicializa o mapa, todos os seus divs externos já devem ser exibidos.

Então, basta inicializar o mapa no final:

 setTimeout(function(){ $mapsOuterDiv.slideToggle(700); setTimeout(function(){ initializeGoogleMap(); },300); },300); 

Também encontrei outra solução. Às vezes você precisa chamar refresh() no google maps object e mapa será forçado a resize.

 // gmaps - instance of particular map ... gmaps.refresh() 

Este código funciona bem (usando jQuery 1.2.6): Css: #gog-map{position:absolute; visibility:hidden;} #gog-map{position:absolute; visibility:hidden;}

 $(document).ready(function() { $('a#link').click(function() { if ($('#gog-map').is(':visible')){ $('#gog-map').slideUp('slow'); } else{ $('#gog-map').slideDown('slow'); $("#gog-map").css('visibility','inherit'); $("#gog-map").css('position','relative'); } return false; }); }); 

 document.getElementById('map_canvas').style.display = 'none'; 

Isso funcionou bem para mim – não sei se isso é porque eu estou escondendo a canvas em vez de o contendo div …. funciona bem no IE, Firefox e Chrome. Claro que você pode ocultar seu contêiner quando a canvas do mapa estiver oculta.

Eu tenho tentado animar meus mapas sem sorte e finalmente descobri isso:

CSS: Nós configuramos o wrapper do mapa com position:absolute; e visibility:hidden; porque tem que ter suas dimensões normais para renderizar corretamente.

JavaScript:

 $(document).ready(function() { // We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height. $("#mapBtn").one("click", function() { $("#myMap").hide(); $("#myMap").css("visibility", "inherit"); $("#myMap").css("position", "relative"); }); // And now we toggle away nicely $("#mapBtn").click(function() { $("#myMap").slideToggle(400); }); }); 

Geralmente o google.maps.event.trigger (map, ‘resize’) atualiza o mapa e, assim, acrescenta o código depois, sempre que ele é exibido, já que o estado anterior de exibição é “nenhum”:

  document.getElementById(hidemap).style.display = 'block'; Generally google.maps.event.trigger(map, 'resize')