显示和隐藏包含谷歌地图的div

Question

我的页面中有Google地图。谷歌地图V3。地图位于div内，当用户单击另一个div时，可以显示和隐藏该地图。问题是当显示包含地图的div时，地图似乎全部错误。

当我最初只是在可见的div中加载地图时，情况并非如此。

代码看起来像

$("#shomap").click(function(){
   $("#map_container").removeClass("my_hidden_element_class");
});

我已尝试过在stackoverflow上找到的一些解决方案，例如在click事件上调整地图大小，但这没有帮助。我还尝试将Google地图Initialize（）函数移出文档就绪事件，然后移动到click事件上。这也没有区别。

地图总是看起来像下面的屏幕截图。

如果我调整浏览器窗口的大小或缩放，地图会自行调整并且看起来很棒。 任何帮助将不胜感激。

Answer 1

不是最干净的方法，但是在UI中有更多的工作，可能是加载或进度条，以下内容可以很好地工作。谷歌地图在加载它们时总是有点气质，而它们没有显示，所以下面的jQuery确保在引入iFrame之前有DOM结构。

<强>的jQuery

$(document).ready(function(){
    $('#shomap').click(function(){
        $('#map-container').show(function(){
            $('#map-container').html('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2404.0307348438287!2d-1.2097479999999716!3d52.947869999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4879e9fa2e6aaaab%3A0xc99bf92a61f8b4dd!2sWollaton+Hall!5e0!3m2!1sen!2suk!4v1421599711279" width="600" height="450" frameborder="0" style="border:0"></iframe>');
        });
    });
});