jquery - simple - markers in google maps




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

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 vinculado a ng-show, porque o $ watch pode disparar 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 tenho uma página e um mapa do google está dentro de um div oculto no início. Em seguida, 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 eu vejo depois de mostrar o div com o mapa oculto nele.


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

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

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


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

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

Javascript

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng( 0.0, 0.0 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

Assim como John Doppelmann e HoffZ indicaram, coloque todos os códigos juntos da seguinte forma em sua função de exibição de div ou evento onclick:

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

Funcionou perfeitamente para mim


Eu acho que a pergunta original é com um mapa que é iniciado em um div oculto da página. Resolvi um problema semelhante ao redimensionar o mapa no div oculto após o documento pronto, depois de inicializado, independentemente do 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'
    });

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

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

Testado no Bootstrap Carousel.

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS

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

JS

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

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
});

Minha solução é muito simples e eficiente:

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>


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

Minha solução foi:

CSS:

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

jQuery:

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

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 esse código dentro e no final do seu código, onde sua div tabulação é 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.


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.


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:

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

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

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

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

    });
});
</script>

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

O Google Maps será recarregado automaticamente:

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

 $("#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);

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.





google-maps-api-3