Google Maps API V3灰色区域

Question

我安装了Google Maps API V3,但是我无法让调整大小功能正常工作.我已经把脚本显示在一个分区中,当点击一个链接时它会下降,但是,它会在两侧显示灰色区域.我已经阅读了一些实例,你需要在脚本中显示调整大小功能,从我能理解的内容来看,但是我无法正确实现它.

这是导致除法(class ="content")的代码:

    $(function() {
$('.action').click(function() {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    content.slideToggle('fast');
});

我有一个id为"map"的div里面的地图.

  <div class="map">
      <div id="map_canvas""></div>
  </div>

我已经整晚都在网站的其他部分工作,而且目前相当分散.对不起,如果我忘记发布必要的东西来解决这个问题.

在此先感谢,Bc.

Answer 1

您需要在谷歌地图上手动抛出偶数调整大小.

google.maps.event.trigger(map, 'resize')

参考.

更新

<script type="text/javascript"> 
// Global Variable
var map;

// This is a global Function
function initialize() 
{ 
  // This variable is scoped only for the initialize function,
  // it is not available to other functions scoped globally
  var myOptions = 
  { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };

  // Instead of a function scoped map variable this should be global
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.trigger(map, 'resize') 
} 
</script>

然后您可以更改为以下代码:

$(function() 
{
  $('.action').click(function() 
  {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    // this uses the callback functionality
    // to only throw the trigger after the
    // animation finishes.
    content.slideToggle('fast',
      function() 
      {
        google.maps.event.trigger(map, 'resize');
      });
  });
});