Centralizar o Google Maps (V3) no redimensionamento do navegador (responsivo)

124

Eu tenho um Google Maps (V3) na minha página com 100% de largura e um marcador no meio. Quando redimensiono a largura da janela do navegador, gostaria que o mapa permanecesse centralizado (responsivo). Agora, o mapa fica no lado esquerdo da página e fica menor.

ATUALIZAÇÃO Conseguiu funcionar exatamente como descrito, graças a duncan. Este é o código final:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});
javascript google-maps google-maps-api-3 Gregory Bolkenstijn
fonte
1
bom trabalho! sim, você deve enviar continuamente o valor central atual para o escopo global, para que ele possa ser captado pelo ouvinte dom
efwjames
Se você está no topo, faça dessa maneira, então centernão precisa ser global. Desde que center(e calculateCenter) estejam no mesmo escopo que map, então tudo deve funcionar. Claro, se mapé global, então você vai precisar para corrigir isso também :)
Roamer-1888
Talvez seja óbvio para a maioria, mas este código vem depois que o mapa é carregado, assim que deve ser, pelo menos em windows.onload
Victoria Ruiz
graças, este deve ser o google padrão mapeia beaviours
Yukulélé

Respostas:

143

Você precisa ter um ouvinte de eventos para quando a janela for redimensionada. Isso funcionou para mim (coloque-o na sua função de inicialização):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
duncan
fonte
Isso funciona perfeito, obrigado! Mas se alguém mudou o mapa, como obtenho o novo centro do mapa? Encontrei a função getCenter (), mas não consigo fazê-la funcionar corretamente. map.setCenter (map.getCenter ()); não funciona
Gregory Bolkenstijn
Você quer outro ouvinte de evento, acho que para "center_changed" no objeto map, que atualiza uma variável global com as novas coordenadas, que você pode usar no seu setCenter.
Duncan
1
Eu tentei isso também: var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); não funciona. Qualquer ajuda seria apreciada.
Gregory Bolkenstijn
Que tal "bounds_changed"?
Duncan
49
Esta é a maneira mais fácil: hsmoore.com/blog/…
AO_
83

Detecte o evento de redimensionamento do navegador, redimensione o Google Map, preservando o ponto central:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

Você pode usar o mesmo código em outros manipuladores de eventos ao redimensionar o mapa do Google por outros meios (por exemplo, com um controle 'redimensionável' da jQuery-UI).

Fonte: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ credita a @smftre pelo link.

Nota: Este código foi vinculado no comentário de @ smftre na resposta aceita. Eu acho que vale a pena adicioná-lo como sua própria resposta, pois é realmente superior à resposta aceita. Isso elimina a necessidade de uma variável global para rastrear o ponto central e um manipulador de eventos para atualizar essa variável.

William Denniss
fonte
De acordo com @William, esse método resulta em uma posição central mais precisa quando o mapa é redimensionado.
Dechfloor
resposta aceita não estava funcionando corretamente, este fez o truque
Tom
Esta é a melhor solução e funciona. Funciona em todos os eventos de redimensionamento do Windows. Outras soluções não funcionaram corretamente.
Zdarsky.peter
1
Isso realmente deveria ter sido publicado como wiki da comunidade.
precisa saber é o seguinte
Funciona, mas eu gostaria de entender mais. O que exatamente faz google.maps.event.trigger(map, "resize");?
meduz '
0

html: Crie uma div com um ID de sua escolha

<div id="map"></div>

js: crie um mapa e anexe-o à div que você acabou de criar

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

Centralizar quando a janela é redimensionada

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
drjorgepolanco
fonte
0

Atualizado da solução acima para es6.

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
David Bradshaw
fonte
Você está usando o addDomListenerfor the window, que é um elemento DOM, e o map, que não é. O objeto de mapa deve usar o google.maps.event.addListenerou seu próprio map.addListenermanipulador de eventos.
Duncan