Центр Карт Google (V3) в браузере с изменением размера (отзывчивый)

У меня есть Google Maps (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);
});

Ответ 1

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

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

Ответ 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 от принятого ответа. Я думаю, что стоит добавить его в качестве собственного ответа, поскольку он действительно превосходит принятый ответ. Это устраняет необходимость в глобальной переменной для отслеживания центральной точки и обработчика события для обновления этой переменной.

Ответ 3

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

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

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

Ответ 4

html: Создайте div с id по вашему выбору

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

Ответ 5

Обновлено приведенное выше решение для es6.

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

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