Сосредоточьте Google Maps (V3) на изменении размера браузера (отзывчивый)

Question

У меня на странице Google Карты (V3) шириной 100% с одним маркером в середине. Когда я изменяю ширину окна моего браузера, я бы хотел, чтобы карта оставалась центрированной (отзывчивой). Теперь карта просто остается в левой части страницы и становится меньше.

UPDATE Получил это работать точно так, как описано, благодаря Дункан. Это окончательный код:

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);
});

Answer 1

Вы должны иметь прослушиватель событий, когда окно изменяется.Это сработало для меня (поместите это в вашу функцию инициализации):

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

Answer 2

Обнаружение события изменения размера браузера, изменение размера карты Google при сохранении центральной точки:

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); 
});

Вы можете использовать тот же код в других обработчиках событий при изменении размера карты Google с помощью других средств (например, с помощью элемента управления изменяемым размером jQuery-UI).

Источник: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ кредит @ smftre за ссылку.

Примечание. Этот код был связан в комментарии @ smftre к принятому ответу. Я думаю, что стоит добавить его в качестве собственного ответа, поскольку он действительно превосходит принятый ответ. Это устраняет необходимость глобальной переменной для отслеживания центральной точки и обработчика события для обновления этой переменной.

Answer 3

Несколько хороших примеров на w3schools.com.Я использовал следующее, и это прекрасно работает.

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

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

Answer 4

Обновление вышеуказанного решения до es6.

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

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));

Answer 5

html: создать div с идентификатором по вашему выбору

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

js: создайте карту и прикрепите ее к только что созданному вами div

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

Центр при изменении размеров окна

var center = map.getCenter();

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