Como faço para redimensionar um mapa do Google com JavaScript depois de carregado?
105
Eu tenho um div 'mapwrap' definido como 400px x 400px e dentro dele tenho um 'mapa' do Google definido como 100% x 100%. Assim, o mapa carrega a 400 x 400 px, com JavaScript, redimensiono o 'mapwrap' para 100% x 100% da tela - o mapa do google é redimensionado para a tela inteira como eu esperava, mas os blocos começam a desaparecer antes da borda direita do página.
Existe uma função simples que posso chamar para fazer com que o mapa do Google seja reajustado para o div 'mapwrap' de tamanho maior?
Esta resposta está aqui há muito tempo, então uma pequena demonstração pode valer a pena e embora ele use jQuery, não há necessidade real de fazê-lo.
$(function(){var mapOptions ={
zoom:8,
center:new google.maps.LatLng(-34.397,150.644)};var map =new google.maps.Map($("#map-canvas")[0], mapOptions);// listen for the window resize event & trigger Google Maps to update too
$(window).resize(function(){// (the 'map' here is the result of the created 'var map = ...' above)
google.maps.event.trigger(map,"resize");});});
html,
body {height:100%;}#map-canvas {min-width:200px;width:50%;min-height:200px;height:80%;border:1px solid blue;}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<divid="map-canvas"></div>
Com o lançamento de um novo renderizador na versão 3.32 da API JavaScript do Google Maps, o evento de redimensionamento não faz mais parte da Mapclasse.
A documentação afirma
Quando o mapa é redimensionado, o centro do mapa é fixo
O controle de tela inteira agora preserva o centro.
Não há mais necessidade de acionar o evento de redimensionamento manualmente.
O mapa não redimensionaria depois de chamar isso, até que eu o envolvesse com um setTimeout. Encontrei essa solução aqui (ver comentário # 46).
Tyler Collier de
Essa resposta deve ser escolhida considerando que a v2 agora está obsoleta. @Tyler Collier este acionador de evento notifica o mapa de que ele precisa se redesenhar. É possível que você esteja redimensionando um contêiner oculto, caso em que, sim, um zoom out e in funcionaria em um tempo limite.
Schien
8
A resposta popular google.maps.event.trigger(map, "resize");não funcionou apenas para mim.
Aqui estava um truque que garantiu que a página fosse carregada e que o mapa também fosse carregado. Ao definir um ouvinte e ouvir o estado ocioso do mapa, você pode chamar o acionador de evento para redimensionar.
Parece que isso é para mapas v2. O autor da postagem original estava perguntando sobre os mapas v3. As duas APIs não parecem ser compatíveis.
JoshuaD
Esse link aciona uma ameaça detectada.
intotecho
1
Isso é o melhor para fazer o trabalho feito. Ele redimensionará seu mapa. Não há mais necessidade de inspecionar o elemento para redimensionar seu mapa. O que ele faz, dispara automaticamente um evento de redimensionamento.
Em primeiro lugar, obrigado por me orientar e encerrar esta edição. Encontrei uma maneira de corrigir esse problema a partir de suas discussões. Sim, vamos direto ao ponto. O que acontece é que estou usando o auxiliar GoogleMapHelper v3 no CakePHP3. Quando tentei abrir o pop-up modal de bootstrap, fui atingido com o problema da caixa cinza sobre o mapa. Foi prorrogado por 2 dias. Finalmente consegui resolver isso.
Precisamos atualizar o GoogleMapHelper para corrigir o problema
É necessário adicionar o script abaixo na função setCenterMap
A resposta popular
google.maps.event.trigger(map, "resize");
não funcionou apenas para mim.Aqui estava um truque que garantiu que a página fosse carregada e que o mapa também fosse carregado. Ao definir um ouvinte e ouvir o estado ocioso do mapa, você pode chamar o acionador de evento para redimensionar.
Esta foi a minha resposta que funcionou para mim.
fonte
O mapa-em-uma-caixa de Wolfgang Pichler oferece para
fonte
Isso é o melhor para fazer o trabalho feito. Ele redimensionará seu mapa. Não há mais necessidade de inspecionar o elemento para redimensionar seu mapa. O que ele faz, dispara automaticamente um evento de redimensionamento.
fonte
Em primeiro lugar, obrigado por me orientar e encerrar esta edição. Encontrei uma maneira de corrigir esse problema a partir de suas discussões. Sim, vamos direto ao ponto. O que acontece é que estou usando o auxiliar GoogleMapHelper v3 no CakePHP3. Quando tentei abrir o pop-up modal de bootstrap, fui atingido com o problema da caixa cinza sobre o mapa. Foi prorrogado por 2 dias. Finalmente consegui resolver isso.
Precisamos atualizar o GoogleMapHelper para corrigir o problema
É necessário adicionar o script abaixo na função setCenterMap
E preciso incluir o código abaixo em JavaScript
fonte