Jquery标签和谷歌地图问题答案

【问题标题】：Jquery tabs and Google maps problemJquery标签和谷歌地图问题
【发布时间】：2011-09-16 07:20:20
【问题描述】：

我的 jquery 应用程序中有两个选项卡。因为每个选项卡都有一个谷歌地图（第 3 版）。

地图完美显示在第一个选项卡中。但在第二个选项卡中，只显示了部分地图。

我的剧本和风格：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style type="text/css">

    #map_canvas { height: 100% ;width:100%}
    #map_canvas1 { height:100% ;width:100%}

</style>

<script type="text/javascript">

    var map;
        var map1;

      function initialize() 
    {
          var latlng = new google.maps.LatLng(11.6952727, 77.5195312);

          var myOptions = {
               zoom: 8,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
              };

    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);


    map1 = new google.maps.Map(document.getElementById("map_canvas1"),myOptions1);

     }
</script>

主体：

<BODY  onload="initialize()">

<div id="map_canvas" style="height:100% ; width:100%"></div>  //It is in First tab Div Tag


<div id="map_canvas1" style="height:100% ; width:100%"></div>  //It is in Second tab Div Tag
</body>

第一个选项卡完美显示地图...但在 第二个选项卡部分地图显示在角落... 这里有什么问题...请帮助我...

【问题讨论】：

你能分享完整的代码（带标签），所以我可以复制，或者直接给出 jsfiddle 的链接。这听起来像是隐藏元素上 100% 宽度/高度的问题。
myOptions1 的定义在哪里

标签： javascript jquery-ui jquery

【解决方案1】：

我之前也遇到过同样的问题：

Google Maps API - Strange Map "Offset" Behaviour

我见过类似的事情。没有访问任何代码，我最好打赌地图初始化为容器 div 的时间隐。我见过这样的原因症状。尝试将您的地图设置为您正在展示它，而不是之前。

问题是第二张地图在初始化时是隐藏的，无论出于何种原因，谷歌地图 api 都不喜欢它。尝试在显示后将第二个地图设置绑定到选项卡切换事件。

【讨论】：

【解决方案2】：

您似乎忘记定义myoptions1。

【讨论】：

我已经测试过了，我看到两张地图没有问题，但奇怪的事情发生了，因为使用相同的myOptions，两张地图显示相同的位置但不同的缩放...也许我是不了解您的问题？