Карта Google не центрируется в Firefox

Question

У меня странная проблема с картой Google, которую я могу скопировать только в Firefox.Для объяснения у нас есть статическая карта, которая при щелчке по ней увеличивается до полной интерактивной карты с маркером в центре.Это прекрасно работает во всех браузерах, кроме Firefox.В Firefox происходит неправильное центрирование карты.Маркер расположен, однако, он находится в верхнем левом углу карты, за пределами видимой области.

Есть идеи?Это меня некоторое время сбивало с толку.

JavaScript:

// lat and lng are initialized earlier
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
};

var map = new google.maps.Map($("#map_canvas")[0], myOptions);

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: icon
});

var resizeMap = function () {
    $("#smallMap, #smallMapOverlay").remove();
    $("#map_canvas").show();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(latlng, 13);
};

$("#smallMapOverlay").live("click", function (e) {
    e.preventDefault();
    resizeMap();
});

CSS:

#map_canvas {
    width: 640px;
    height: 377px; 
}

Answer 1

Karim79 'исправление работает. Я разработал это немного по-другому. Если у вас есть класс-оболочка для обработки функций отображения, вы можете создать функцию сброса следующим образом:

function reset(){
        setTimeout(function(){gm.event.trigger(_gMap, 'resize');}, 50);
        setTimeout(function(){_gMap.setCenter(settings.mapOptions.center);}, 100);
    }

Лучший * * 1004

Answer 2

Похоже, что добавление методов resize и setCenter в ответный вызов show() и небольшая задержка решают проблему.

var resizeMap = function () {
    $("#smallMap, #smallMapOverlay").remove();
    $("#map_canvas").show(10, function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng, 13);
    });
};

Это не самое элегантное решение, но оно работает.