Javascript Jquery标签和谷歌地图问题_Javascript_Jquery Ui_Jquery

Javascript Jquery标签和谷歌地图问题

javascript jquery-ui jquery

Javascript Jquery标签和谷歌地图问题,javascript,jquery-ui,jquery,Javascript,Jquery Ui,Jquery,我的jquery应用程序中有两个选项卡。因为每个标签都有一个谷歌地图（版本3）地图完美地显示在第一个选项卡中。但在第二个选项卡中，仅显示部分地图我的剧本和风格： <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style type="text/css"> #map_canvas { height: 10

我的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>


#地图画布{高度：100%；宽度：100%}
#地图画布1{高度：100%；宽度：100%}
var映射；
var-map1；
函数初始化（）
{
var latlng=新的google.maps.latlng（11.695272777.5195312）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
map1=新的google.maps.Map（document.getElementById（“Map_canvas1”），myOptions1）；
}

正文：

<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>


//它位于第一个选项卡Div标记中
//它位于第二个tab Div标签中

第一个选项卡完美地显示地图…但在地图的第二个选项卡部分，显示在角落…

这里有什么问题…请帮帮我…

您似乎忘记定义

myoptions 1

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

我见过类似的事情。没有任何代码，我最好我敢打赌，该映射是在容器div为空的时间隐藏的我见过这样的原因症状。尝试将地图设置为你在展示它，而不是以前

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

您是否可以共享完整的代码（与tab一起），以便我可以复制，或者直接链接到JSFIDLE。这听起来像是隐藏元素100%宽度/高度的问题。MyOptions1的定义在哪里？我已经测试了它，我看到两个贴图没有问题，但奇怪的事情发生了，因为使用相同的

MyOption

，两个贴图显示相同的位置但不同的缩放…也许我不理解你的问题？