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?

Respostas:


28

Se você estiver usando o Google Maps v2, chame checkResize()seu mapa após redimensionar o contêiner. ligação

ATUALIZAR

A API JavaScript v2 do Google Maps foi descontinuada em 2011. Não está mais disponível.


323

para o Google Maps v3, você precisa acionar o evento de redimensionamento de maneira diferente:

google.maps.event.trigger(map, "resize");

Consulte a documentação do evento de redimensionamento (você precisará pesquisar a palavra 'redimensionar'): http://code.google.com/apis/maps/documentation/v3/reference.html#event


Atualizar

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

ATUALIZAÇÃO em 22/05/2018

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.

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


2
Para qualquer pessoa que use goMap, lembre-se de que o objeto google map está disponível em $ .goMap.map
Adam Caviness

1
Veja esta resposta por Andrew Hedges para uma maneira de implementar:
CrazyTim

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.

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
}); 

Esta foi a minha resposta que funcionou para mim.


2

O mapa-em-uma-caixa de Wolfgang Pichler oferece para

Carregue um mapa em um elemento div arrastável e redimensionável.


1
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.

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, 'resize');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

0

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

google.maps.event.trigger({$id}, \"resize\");

E preciso incluir o código abaixo em JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.