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é

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 '

4

Alguns bons exemplos em w3schools.com. Eu usei o seguinte e funciona muito bem.

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

— Steve Mulvihill
fonte

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