Javascript 谷歌地图API->；Jquery可扩展地图和浏览器问题

我一直在用Google Map API v3开发一个页面，我有一个简短的问题。基本上，我使用jquery隐藏/显示地图面板（地图持有者），问题是：

->在Firefox中，API没有正确填充地图画布，它只填充了大约1/5的分幅（看起来像预期地图的最后1/5）。无论如何，为了解决这个问题，我在jquery中的“expand”函数中添加了以下代码：

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

->现在我的主要问题是，如果我什么都不做，地图在浏览器中显示正确，但在Firefox和Chrome中显示错误。如果有其他人经历过这种情况，我可以通过改变坐标来“修复”它，但这显然逆转了问题，使I.E不正确

我曾尝试为“slideDown（）”添加超时，但这对任何事情都没有帮助

谢谢， 亚历克斯

编辑，更多信息>我正在一个RAD平台上开发这个，因此我很难让代码可用。但是，地图基于两个div，即外部div和地图画布。我正在用jquery扩展/折叠外部div。jquery代码很简单：

$(document).ready(function () {
    $("#MAP_HOLDER").hide();
    $("#hideMap").hide();
});

collapse = function (element) {
    $("#MAP_HOLDER").slideUp();
    $("#hideMap").hide();
    $("#showMap").show();
}

expand = function (element) {
    $("#hideMap").show();
    $("#showMap").hide();
    $("#MAP_HOLDER").slideDown();
    google.maps.event.trigger(map, "resize"); // resize map
    var position = map.getcentre();
    map.setCentre(position);
}

地图api代码：

// Set look and feel of the maps
google.maps.visualRefresh = true;
google.maps.event.addDomListener(window, 'load', init);

// Create some variables for our map elements
var map;
var markersArray = [];
var marker;
var mapOptions = {
    center: new google.maps.LatLng(lat_goes_here, lng_goes_here),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

// A function to run at page load
function init() {
    //location on form here:
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    //set marker image here
    marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
    });
    marker.setMap(map);
    marker.setTitle("stuff");
    // Add a function to run on the "click" event
    google.maps.event.addListener(map, 'click', function (event) {
        document.getElementById("pos_lat").value = event.latLng.lat();
        document.getElementById("pos_lng").value = event.latLng.lng();
        marker.setPosition(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
    });
}

我编辑了一点，所以请忽略任何基本的打字错误。我没有将CSS复制到这个文件中，但我将以下内容应用到（还有更多内容）MAP_HOLDER div中：

overflow:hidden;
z-index:-999;

---

整个事情都在进行

尝试将贴图大小添加为

.show（）

函数的回调

诸如此类：

function showMap() {

    $("#MAP_HOLDER").show(resizeMap);
}

function resizeMap() {

    google.maps.event.trigger(map, "resize");
}

下面是一个示例

---

我用IE和Chrome对它进行了测试，两者都很有魅力。希望这有帮助。

这里没有足够的信息可以帮助您。请给出一个显示问题的工作示例，并告诉我们有关错误显示问题的更多信息。谢谢，错误显示问题是由于加载页面时最初设置为隐藏的div造成的。一旦jquery展开面板，地图就无法正确填充平铺。这张图片与我的经历非常相似，请注意它如何不正确地集中：->此链接与我的问题相似->我将尝试扩展我的原始帖子，以更详细地解释它。如果你能帮我做一个调查，那就太好了。我已经更新了我的帖子，希望有更多的信息。我没有包括CSS，因为，嗯，RAD平台有点“笨重”，我看不到一个简单的方法来把它全部拖出来-我对这一切都有点陌生，所以我对我来说太简单了。谢谢你的回复。是的，它正在按预期调整大小，但是它没有集中在选项中设置的co ORD上…这在IE中有效，但在Chrome/Firefox中不起作用…我可以更改co ORD，但是IE将不起作用，谢谢！正确的。重置中心怎么样？看我更新的提琴。是的，我已经试过了，看原始的文章相当基本-我正在尝试创建一个提琴，但是css造成了来自RAD的严重破坏。我想知道css是否导致了这个问题……你试过我更新的小提琴了吗？这两种浏览器对我都适用。或者我不明白你那边有什么问题…嗨，是的，谢谢。我试过了，但没有成功。很抱歉，我试图让fiddle正确地复制错误…这并不容易，但我开始做到这一点。它不是100%准确的，因为在我的开发环境中，我实际上可以正确调整大小，只是没有重新以Chrome/Firefox为中心。无论如何，看看这里，我也实现了jquery：