Javascript 如何在jQuery应用程序的两个选项卡中添加Google地图

我的jQuery应用程序中有两个选项卡。我想在这两个选项卡中使用谷歌地图。我为下面代码中显示的每个选项卡添加了脚本和两个

标记

第一个选项卡：

<div class="map_canvas" style="width:100%; height:100%"></div> 

<div class="map_canvas" style="width:100%; height:100%"></div> 

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.getElementByClassName("map_canvas"),myOptions);

    }


----------Style for Google Map
.map_canvas { height: 100% }
#notes{ height: 100%;width:100% ; margin: 0px; padding: 0px }  // Tab1 div tag ,contains the First tab map Div Tag
#accordionWrapper{ height: 100%;width:100% ; margin: 0px; padding: 0px }// Tab2 div tag, contains the First tab map Div Tag

---

地图未显示在两个选项卡中。这里的问题是什么？

您可以看到getElementByClassName（）按元素在树中的显示顺序返回找到的元素的活动节点列表：您应该迭代该节点列表，并为每个元素创建一个新的映射，因为我认为gmaps API不允许您这样做。

您将希望使用

map\u canvas

类迭代元素，并为每个元素创建一个新的

map

实例他们中的一个，否则就不行了

我猜您是在使用jQuery UI选项卡来实现这一点？如果是这样，那么在将谷歌地图加载到隐藏/非活动选项卡时，您很可能会遇到麻烦。正如评论中提到的，已经存在关于这一点的问题，并附有解决这一问题的答案

无论如何，对代码进行以下更改/添加，您就可以开始了

CSS

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

JavaScript

$(function() {

    // Container for maps
    var maps = [],
        // Initial position
        latlng = new google.maps.LatLng(11.6952727, 77.5195312),
        // Options for Google Maps
        mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    // Iterate the canvas elements and create a new map instance
    $(".map_canvas").each(function(){
        maps.push(new google.maps.Map(this, mapOptions));
    });

    // Trigger map resize on tab change
    $('#id-of-tabs-container').bind('tabsshow', function(event, ui) {
        google.maps.events.trigger(maps[ui.index], 'resize');
    });

});

---

将临时ID替换为元素的相应ID。

要找出问题所在，请在Google Chrome中运行它，转到工具->JavaScript控制台，告诉我们错误是什么。您可以使用Firefox中的Firebug或IE9中的F12作为替代。哦，看起来这是一个常见的JQuery选项卡问题，请参见此处