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

问题描述

|| 我的jQuery应用程序中有两个选项卡。我想在两个标签中都使用Google Maps。我为下面的代码所示的每个选项卡添加了脚本和两个

<div>

标记。 第一个标签：

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

第二个标签：

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

Google Maps脚本：

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（）以树中出现的顺序返回找到的元素的实时NodeList：您应该遍历该nodeList并为每个元素创建一个新的映射，因为我认为gmaps API不允许您去做。     ,        您将要使用

map_canvas

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

Map

实例，否则它将无法正常工作。 我想您正在为此使用jQuery UI Tabs？如果是这样，在将Google Maps加载到隐藏/不活动的标签中时，您很可能会遇到麻烦。正如评论中提到的那样，已经存在有关此问题的问题，并附带了解决该问题的答案。 无论如何，对您的代码进行以下更改/添加，您应该一切顺利！ 的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。