it-swarm-pt.tech

Um mapa do Google mais recente depois que o contêiner mudou de largura

Eu tenho um mapa do Google definido com a API Javascript V3. Ele é exibido em uma div com uma largura dinâmica, como um painel de conteúdo desliza quando clicamos em um marcador.

Tudo funciona bem, mas uma coisa: quando o painel desliza para cima, a largura do mapa é alterada e o centro é deslocado para a direita (o painel fica à esquerda). É realmente inconveniente, especialmente em pequenas resoluções, onde você nem consegue ver o centro depois que o painel é aberto.

Eu tentei o gatilho 'redimensionar', mas parece não funcionar ... Alguma idéia?

Muito obrigado !

33
Charleshaa

Chamar resize por si mesmo não alcançará o que você precisa.

O que você precisa fazer é primeiro (antes que ocorra o redimensionamento) obter o centro atual do mapa

var currCenter = map.getCenter();

Então você precisa fazer algo como o seguinte, depois que sua div for redimensionada.

google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

Deve fazer o truque

ATUALIZAÇÃO 22/05/2018

Com uma nova versão do renderizador na versão 3.32 da API JavaScript do Maps, o evento redimensionar não faz mais parte da classe Map.

A documentação declara

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

  • O controle de tela cheia agora preserva o centro.

  • Não há mais a 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

84
omarello

Primeiro defina uma variável para o centro atual, depois use um ouvinte de eventos para detectar um redimensionamento e, assim, defina o centro.

//Get current center
var getCen = map.getCenter();

//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
   //Set Center
   map.setCenter(getCen);
});
17
Tyler Rafferty

omarello funciona, mas não posso votar novamente. Você provavelmente esqueceu de se referir à var que define as coordenadas do centro. Tudo o que "redimensionar" faz é puxar as divs largura e altura atuais, não muda nada no mapa - ainda!

var center = new google.maps.LatLng(39.5, -98.3);

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
        e.preventDefault();
        $("#map_canvas").css({ 
            width: '1000px'});
        google.maps.event.trigger(map, "resize"); 
        map.setCenter(center);
        }); 
    });
7
efwjames

Hy lá tente isso;)

Inicialização no mapa

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function () {
    currentMapCenter = map.getCenter();
});

google.maps.event.addListener(map, 'bounds_changed', function () {
    if (currentMapCenter) {
    // react here
        map.setCenter(currentMapCenter);
    }
    currentMapCenter = null;
});

Depois disso, basta ligar quando quiser que o mapa seja redimensionado.

google.maps.event.trigger(map, 'resize');
2
Jose Rocha