Центрировать 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

4

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

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

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

— Стив Малвихилл
источник

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обработчик событий.

— Дункан