谷歌地图在隐藏分区中显示为灰色

Question

我已经阅读了很多关于这个问题的文章，但是没有什么能解决我的问题。我有一个标签上的谷歌地图，最初是隐藏的网页加载时，希望得到一些帮助，请。以下是完整的代码：

<script type="text/javascript"> 
  function loadsinglemap(){
  var mymap = new MeOnTheMap({
  container: "map_sidebar2",
  html: "<?php echo str_replace('"',"",$post->post_title); ?>",
  address: "<?php echo str_replace('"','',get_post_meta($post->ID, "map_location", true)); ?>",
  zoomLevel: 15,

  });                        
  } 

 jQuery(document).ready(function() {   loadsinglemap();  })

 </script>

This is on the page where the map is displayed:

<script type="text/javascript">
$(document).ready(function(){
$('a.contact').click(function(){
google.maps.event.trigger(mymap, 'resize');
});
});
</script>

我就是不能让它工作。如果有人看到有帮助的东西，请回复。谢啦

编辑：将元素选择器更改为类，并将我的链接更改为类而不是ID，现在它至少会选择它。我在firebug中得到一个错误，“mymap未定义”。

Answer 1

在这里检查Roosko的答案https://groups.google.com/forum/#!topic/google-maps-js-api-v3/aUrVnx-i7LI，它适合我！

由于映射在模态获得定义的大小之前加载，因此它将大小呈现为零。

<a href="#?w=500" rel="popup2" class="poplight" onClick="initialize()">
    <img src='images/location1.png' title='Location' alt='images/location2.png' />
</a> 

当弹出窗口被单击时，我调用了prilize（）函数。

Answer 2

我发现没有隐藏div，而是将其高度/宽度设置为0px；并将其溢出设置为隐藏。

帮助了我，希望对你有帮助：）

Answer 3

在取消隐藏div之后再次调用initilize（）函数。我这样做了，它成功了<代码>JSFIDLE