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

124

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

ОБНОВЛЕНИЕ Все заработало точно так, как описано, благодаря Дункану. Это последний код:

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 Грегори Болкенштейн
источник
1
хорошая работа! да, вы должны постоянно выводить текущее центральное значение в глобальную область видимости, чтобы оно могло быть
получено
Если вы собираетесь делать это таким образом, то centerне обязательно быть глобальным. Предоставление center(и calculateCenter) находится в той же области, что и map, тогда все должно работать. Конечно, если mapглобальный, то вам тоже нужно это исправить :)
Roamer-1888
Может быть, для большинства это очевидно, но этот код появляется ПОСЛЕ загрузки карты, поэтому он должен быть как минимум на windows.onload
Виктория Руис,
спасибо, это должны быть карты Google по умолчанию beaviours
Юкулеле

Ответы:

143

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

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
Duncan
источник
Это отлично работает, спасибо! Но если кто-то переместил карту, как мне получить новый центр карты? Я нашел функцию getCenter (), но не могу заставить ее работать правильно. map.setCenter (map.getCenter ()); не работает.
Грегори Болкенштейн
Вам нужен другой прослушиватель событий, я думаю, для "center_changed" в объекте карты, который обновляет глобальную переменную с новыми координатами, которые вы затем можете использовать в своем setCenter.
duncan
1
Я тоже пробовал: var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); не работает. Любая помощь будет оценена.
Gregory Bolkenstijn
Как насчет "bounds_changed" вместо этого?
duncan
49
Это самый простой способ: hsmoore.com/blog/…
AO_ 08
83

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

Уильям Деннисс
источник
Согласитесь с @William, этот метод приводит к более точному центральному положению при изменении размера карты.
десятый этаж, 02
принятый ответ работал некорректно, этот сработал
Том
Это лучшее и рабочее решение. Работает с каждым событием изменения размера окна. Другие решения не работали должным образом.
zdarsky.peter
1
Это действительно нужно было опубликовать как вики сообщества.
gustavohenke
Это работает, но я бы хотел понять это больше. Что именно делает google.maps.event.trigger(map, "resize");?
meduz
0

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);
});
drjorgepolanco
источник
0

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

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

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
Дэвид Брэдшоу
источник
Вы используете как addDomListenerдля windowэлемента, который является элементом DOM, так и для элемента map, который не является. Объект карты должен использовать google.maps.event.addListenerсвой собственный map.addListenerобработчик событий.
Дункан