Javascript 显示：无，关闭滑动面板加载页面，但无法正确显示谷歌地图

好的，我的网站上有一个滑动面板(http://www.security-vacancies.net/index.php)按下链接视图地图时，滑动面板将打开以显示谷歌地图

我遇到的问题是CSS映射元素具有以下特性

 Display: none 

当网页加载时，面板关闭，当我打开滑动面板时，地图不会正确显示，只显示一小部分。现在我在这个网站上读到了一些其他的帖子，解释说地图没有显示，因为显示屏上显示没有

当我移除显示元素时，地图显示得非常完美，但当页面加载时，滑动面板处于打开位置。我尝试了几种不同的方法来寻找解决方案，但我运气不佳，不知道是否有人知道我如何解决这个问题

---

谢谢

我已经多次遇到这个问题。它以这种方式加载地图，因为您在地图显示为“display:none”时启动它，而gmap以画布大小0:0启动

有两种解决方法：

1） 用网站加载地图（不要在加载时使用“display:none；”），onready（）模拟对隐藏地图的触发器（“查看作业地图”）的单击。地图加载后隐藏将在视觉上可见

2） 请勿在加载时启动映射。第一次单击“查看工作地图”后启动地图。请记住将映射保存在启动的位置，并在启动后进行检查，以避免每次触发“查看作业映射”时启动映射。

​$（文档）.就绪（函数（）{
$（“#作业映射”）。在（'单击'，'幻灯片'，函数（）上{
$（“#面板”）.slideToggle（）；
$（'#map'）。toggleClass（'visible'）；
});
});​
#面板{显示：无；高度：600px；宽度：960px；背景：#ccc；}贴图{不透明度：0；过渡（全部0.4s线性）；-webkit过渡（全部0.4s线性）；-moz过渡（全部0.4s线性）；-o过渡（全部0.4s线性）}贴图。可见{不透明度：1；过渡（全部0.4s线性）；-webkit过渡（全部0.4s线性）；-moz过渡（全部0.4s线性）-o-过渡（不透明度0.4s线性）；}​

地图在网站的什么位置？我没有在主页上看到它。很抱歉，在主图片下，右下角显示的是查看工作地图，如果你点击一个滑动面板向下移动，你会看到它只显示了地图的一部分。谢谢，老实说，我听不懂你说的，但我不确定如何实现它，也不确定我是否喜欢在页面加载过程中地图可见然后消失的想法。但至少现在我知道该探索什么了，谢谢。你能看到这个：

$（“#panel”）。slideToggle（“slow”）在你的js中？将此行替换为：
$（“#panel”）.slideToggle（“slow”，function（）{load（）；}）。这只是一个如何让它工作的提示。您需要编写一些额外的代码以使其对用户友好：）谢谢我尝试了它，但它不起作用面板停止滑动它起作用了，只需确保#map具有固定的宽度和高度。此代码是否与已有的代码互换？就像我做的那样，面板根本不移动。可能是你的幻灯片类连接到了一个锚。我将其设置为使用跨度。你可以看到我在这里所做的：谢谢，这真的很有帮助，我现在的问题是我复制了你的代码，它在Opera中工作得很好，但不是ie 10或google chrome。
​$(document).ready(function(){
    $('#jobmap').on('click', '.slide', function(){
        $('#panel').slideToggle();
        $('#map').toggleClass('visible');
    });
});​

<style> #panel {display:none; height:600px; width:960px; background:#ccc;}#map {opacity:0; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(all 0.4s linear);} #map.visible {opacity:1; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(opacity 0.4s linear);}​</style>