显示和隐藏包含 google 地图的 div

Question

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

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

代码看起来像

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

我尝试了一些在 Whosebug 上找到的解决方案，例如在点击事件中调整地图大小，但这没有帮助。我还尝试将 Google maps Initialize() 函数从文档就绪事件中移出，并移到点击事件中。这也没有区别。

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

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

Answer 1

不是最干净的方法，但在 UI 中做更多的工作，可能是一个加载或进度条，下面的方法会很好地工作。 Google 地图在显示时加载时总是有点不稳定 none 所以下面的 jQuery 确保 DOM 结构在引入 iFrame 之前存在.

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

显示和隐藏包含 google 地图的 div

Show and hide div containing google map

javascript

jquery

css

google-maps