Повторить карту Google после изменения контейнера

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

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

Я пробовал триггер 'resize', но он не работает... Любые идеи?

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

Ответы

Ответ 1

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

Что вам нужно сделать, это сначала (до того, как произойдет изменение размера) получить текущий центр карты

var currCenter = map.getCenter();

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

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

Должен сделать трюк

Ответ 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);
});

Ответ 3

omarello действительно работает, но я не могу его продвинуть. Вероятно, вы забыли обратиться к var, который определяет координаты центра. Все "resize" делает это, вытягивая текущую ширину и высоту divs, ничего не меняя о карте - пока!

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

Ответ 4

Hy попробуйте это;)

Инициализация карты

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

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

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