como lidar com o google map dentro de um div oculto (Imagem atualizada)

Eu tenho uma página e um mapa do google está dentro de um div oculto no início. Depois mostro o div depois de clicar em um link, mas apenas o canto superior esquerdo do mapa aparece.

Eu tentei ter esse código executado após o clique:

map0.onResize(); 

ou:

  google.maps.event.trigger(map0, 'resize') 

alguma ideia. aqui está uma imagem do que vejo depois de mostrar o div com o mapa oculto nele. texto alternativo

Apenas testei-me e aqui está como eu me aproximei. Bastante para a frente, deixe-me saber se você precisar de algum esclarecimento

HTML

 

CSS

  

Javascript

  

Eu estava tendo o mesmo problema e descobri que quando mostro o div, chame google.maps.event.trigger(map, 'resize'); e parece resolver o problema para mim.

 google.maps.event.trigger($("#div_ID")[0], 'resize'); 

Se você não tem mapa variável disponível, ele deve ser o primeiro elemento (a menos que você tenha feito algo estúpido) no div que contém GMAP.

Eu tinha um mapa do Google dentro de uma guia do Bootstrap, que não estava sendo exibida corretamente. Essa foi a minha correção.

 // Previously stored my map object(s) in googleMaps array $('a[href="#profileTab"]').on('shown', function() { // When tab is displayed... var map = googleMaps[0], center = map.getCenter(); google.maps.event.trigger(map, 'resize'); // fixes map display map.setCenter(center); // centers map correctly }); 

Como atualizar o mapa quando você redimensiona seu div

Não é suficiente apenas chamar google.maps.event.trigger(map, 'resize'); Você também deve redefinir o centro do mapa.

 var map; var initialize= function (){ ... } var resize = function () { if (typeof(map) == "undefined") {) { // initialize the map. You only need this if you may not have initialized your map when resize() is called. initialize(); } else { // okay, we've got a map and we need to resize it var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center); } } 

Como ouvir o evento de redimensionamento

Angular (ng-show ou ui-bootstrap em colapso)

Vincule-se diretamente à visibilidade do elemento, e não ao valor ligado ao ng-show, porque o $ watch pode triggersr antes de o ng-show ser atualizado (para que o div permaneça invisível).

 scope.$watch(function () { return element.is(':visible'); }, function () { resize(); } ); 

jQuery .show ()

Use o retorno de chamada interno

 $("#myMapDiv").show(speed, function() { resize(); }); 

Bootstrap 3 Modal

 $('#myModal').on('shown.bs.modal', function() { resize(); }) 

Eu tive o mesmo problema, o google.maps.event.trigger(map, 'resize') não estava funcionando para mim.

O que eu fiz foi colocar um timer para atualizar o mapa depois de colocar visível o div

 //CODE WORKING var refreshIntervalId; function showMap() { document.getElementById('divMap').style.display = ''; refreshIntervalId = setInterval(function () { updateMapTimer() }, 300); } function updateMapTimer() { clearInterval(refreshIntervalId); var map = new google.maps.Map(.... .... } 

Eu não sei se é a maneira mais conveniente de fazer isso, mas funciona!

Se você tiver um mapa do Google inserido ao copiar / colar o código do iframe e não quiser usar a API do Google Maps , essa é uma solução fácil. Basta executar a seguinte linha de javascript quando mostrar o mapa oculto. Ele apenas pega o código HTML do iframe e o insere no mesmo lugar, então ele renderiza novamente:

 document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML; 

jQuery version:

 $('#map-wrapper').html( $('#map-wrapper').html() ); 

O HTML:

 .... 
....

O exemplo a seguir funciona para um mapa inicialmente oculto em uma guia Bootstrap 3:

  

Também é possível acionar o evento de redimensionamento da janela nativa.

O Google Maps será recarregado automaticamente:

 window.dispatchEvent(new Event('resize')); 

Com jQuery você poderia fazer algo assim. Isso me ajudou a carregar um mapa do Google no Umbraco CMS em uma guia que não seria visível imediatamente.

 function waitForVisibleMapElement() { setTimeout(function () { if ($('#map_canvas').is(":visible")) { // Initialize your Google Map here } else { waitForVisibleMapElement(); }; }, 100); }; waitForVisibleMapElement(); 

Minha solução é muito simples e eficiente:

HTML

 

CSS

 .map-wrap{ height:0; width:0; overflow:hidden; } 

Jquery

 $('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map $('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map 

Ou, se você usar o gmaps.js , ligue para:

 map.refresh(); 

quando seu div é mostrado.

Eu acho que a pergunta original é com um mapa que é iniciado em um div oculto da página. Eu resolvi um problema semelhante redimensionando o mapa no div oculto após o documento pronto, depois que ele foi inicializado, independentemente de seu status de exibição. No meu caso, eu tenho 2 mapas, um é mostrado e um é escondido quando eles são inicializados e eu não quero inicializar um mapa toda vez que ele é mostrado. É um post antigo, mas espero que ajude quem está procurando.

Eu encontrei isso para trabalhar para mim:

esconder:

 $('.mapWrapper') .css({ visibility: 'hidden', height: 0 }); 

mostrar:

  $('.mapWrapper').css({ visibility: 'visible', height: 'auto' }); 

Se usado dentro das abas do Bootstrap v3, o seguinte deve funcionar:

 $('a[href="#tab-location"]').on('shown.bs.tab', function(e){ var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center); }); 

onde tab-location é o ID da guia que contém o mapa.

Assim como John Doppelmann e HoffZ indicaram, coloque todos os códigos juntos da seguinte forma em sua function mostrando div ou evento onclick:

 setTimeout(function(){ var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center); }); 

Funcionou perfeitamente para mim

Minha solução foi:

CSS:

 .map { height: 400px; border: #ccc solid 1px; } 

jQuery:

 $('.map').width(555); // width of map canvas 

Eu não gostava que o mapa fosse carregado somente depois que o div oculto se tornasse visível. Em um carrossel, por exemplo, isso realmente não funciona.

Minha solução é adicionar class ao elemento oculto para reexibi-lo e, em vez disso, ocultá-lo com a posição absoluta, depois renderizar o mapa e remover a class após o carregamento do mapa.

Testado no Bootstrap Carousel.

HTML

CSS

 .loading { display: block; position: absolute; } 

JS

 $(document).ready(function(){ // render map // google.maps.event.addListenerOnce(map, 'idle', function(){ $('.loading').removeClass('loading'); }); } 

use esta linha de códigos quando quiser mostrar o mapa.

  $("#map_view").show("slow"); // use id of div which you want to show. var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"; document.body.appendChild(script); 
  $("#map_view").show("slow"); // use id of div which you want to show. var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"; document.body.appendChild(script); 

Primeiro post. Meu googleMap div estava em um div contêiner com {display: none} até que a guia seja clicada. Tive o mesmo problema que OP. Isso funcionou para mim:

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

Cole este código dentro e no final do seu código, onde sua div tabulação contêiner é clicada e revela seu div oculto. O importante é que seu div contêiner tem que estar visível antes de inicializar pode ser chamado.

Eu tentei várias soluções propostas aqui e outras páginas e elas não funcionaram para mim. Deixe-me saber se isso funciona para você. Obrigado.

Adicione este código antes do div ou passe-o para um arquivo js:

  

Este evento será acionado após o carregamento da div, para que ele atualize o conteúdo do mapa sem precisar pressionar F5

Ao mostrar o mapa, estou geocodificando um endereço e configurando o centro de mapas. O google.maps.event.trigger(map, 'resize'); não funcionou para mim.

Eu tive que usar um map.setZoom(14);

Código abaixo:

 document.getElementById('map').style.display = 'block'; var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': input.value }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker2 = new google.maps.Marker({ map: map, position: results[0].geometry.location }); map.setZoom(14); marker2.addListener('dragend', function (event) { $('#lat').val(event.latLng.lat()); $('#lng').val(event.latLng.lng()); }); } }); 
 function init_map() { var myOptions = { zoom: 16, center: new google.maps.LatLng(0.0, 0.0), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(0.0, 0.0) }); infowindow = new google.maps.InfoWindow({ content: 'content' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); infowindow.open(map, marker); } google.maps.event.addDomListener(window, 'load', init_map); jQuery(window).resize(function() { init_map(); }); jQuery('.open-map').on('click', function() { init_map(); });