如何在 jQuery 应用程序的两个选项卡中添加谷歌地图答案

【问题标题】：How to add Google Maps in two tabs of jQuery application如何在 jQuery 应用程序的两个选项卡中添加谷歌地图
【发布时间】：2011-06-14 13:16:00
【问题描述】：

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

第一个标签：

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

第二个标签：

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

Google 地图脚本：

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

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

【问题讨论】：

要找出问题所在在谷歌浏览器中运行它，转到工具 -> JavaScript 控制台并告诉我们错误是什么。您可以在 Firefox 中使用 Firebug 或在 IE9 中使用 F12。
哦，看起来这是一个常见的 JQuery 标签问题，请参阅此处stackoverflow.com/questions/1428178

标签： javascript jquery

【解决方案1】：

如您所见，heregetElementByClassName() 按照它们在树中出现的顺序返回找到的元素的实时 NodeList：您应该遍历该 nodeList 并为每个元素创建一个新映射，因为我不认为 gmaps API 允许您这样做。

【讨论】：

【解决方案2】：

您需要使用 map_canvas 类迭代元素并为每个元素创建一个新的 Map 实例，否则将无法正常工作。

我猜你正在为此使用 jQuery UI 选项卡？如果是这样，您在将 Google 地图加载到隐藏/非活动标签时很可能会遇到麻烦。正如 cmets 中所述，已经存在与此相关的问题，并附有解决此问题的答案。

无论如何，对您的代码进行以下更改/添加，您应该一切顺利！

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。

【讨论】：