Question

我的jquery应用程序中有两个Tabs。每个标签都有一个Google Map（版本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>

第一个标签完美地显示地图...但是在第二个标签部分地图中显示的角落...... 这有什么问题......请帮帮我......

Answer 1

您似乎忘了定义myoptions1。

Answer 2

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

Google Maps API - Strange Map "Offset" Behaviour

我见过类似的东西。无法访问任何代码，我最好赌注是地图初始化为容器div的时间隐。我已经看到了这样的原因症状。尝试将地图设置为你正在展示它，而不是之前。

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

Jquery选项卡和Google地图问题

2 个答案: