Перецентрирование карты Google после изменения ширины контейнера

Question

У меня установлена ​​карта Google с API Javascript V3.Он отображается в элементе div с динамической шириной, так как панель контента скользит вверх, когда мы нажимаем на маркер.

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

Я попробовал триггер «изменить размер», но, похоже, он не работает ... Есть идеи?

Большое спасибо!

Answer 1

Вызов resize сам по себе не достигнет того, что вам нужно.

Сначала вам нужно (до изменения размера) получить текущий центр карты

var currCenter = map.getCenter();

Затем вам нужно сделать что-то вроде следующего, после того, как ваш div изменен.

google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

Нужно сделать хитрость

ОБНОВЛЕНИЕ 2018-05-22

С новым выпуском рендерера в версии 3.32 Google Maps JavaScript APIсобытие resize больше не является частью класса Map.

В документации указывается

При изменении размера карты центр карты фиксируется

• Полноэкранное управление теперь сохраняет центр.

• Больше нет необходимости запускать событие изменения размера вручную.

источник: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); не имеет никакого эффекта, начиная с версии 3.32

Answer 2

Сначала установите переменную для текущего центра, затем используйте прослушиватель событий для определения изменения размера и, таким образом, установите центр.

//Get current center
var getCen = map.getCenter();

//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
   //Set Center
   map.setCenter(getCen);
});

Answer 3

Омарелло работает, но я не могу его проголосовать. Вы, вероятно, забыли сослаться на переменную, которая определяет ваши координаты центра. Все, что делает «изменить размер», это вытягивает div'ы текущей ширины и высоты, это ничего не меняет на карте - пока!

var center = new google.maps.LatLng(39.5, -98.3);

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
        e.preventDefault();
        $("#map_canvas").css({ 
            width: '1000px'});
        google.maps.event.trigger(map, "resize"); 
        map.setCenter(center);
        }); 
    });

Answer 4

Хай, попробуйте это;)

При инициализации карты

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function () {
    currentMapCenter = map.getCenter();
});

google.maps.event.addListener(map, 'bounds_changed', function () {
    if (currentMapCenter) {
    // react here
        map.setCenter(currentMapCenter);
    }
    currentMapCenter = null;
});

После этого просто позвоните, когда хотите изменить размер карты.

google.maps.event.trigger(map, 'resize');