同じGoogleマップ地図の変更後に2つのタブで表示

Question

私のJqueryアプリケーション内に2つのタブがあります。各タブで私はGoogleマップを持っています...これらのタブは、サイドバーのチェックボックスをクリックすることで動的に作成されます...例えば、最初のチェックボックスをクリックすると、タブとその内容（Googleマップ）が作成されます...別のチェックボックスをクリックすると、別のタブが作成され、コンテンツが作成されます。

チェックボックスを使用してタブを作成すると、動的タブが作成され、Googleマップが正しく表示されます。私の問題は、私がタブ（タブ間を移動するには）Googleマップが変更されていない上でクリックすると...実際に私は、チェックボックスを使用して最初のタブと2番目のタブを作成している。ここで

...

もし私がマップのいくつかの変更後にタブを切り替えると、同じタブにアジインスイッチがあると同じマップがラテックスタブと表示されます...

この問題を解決する方法....

//タブを追加する場合クリックしてください。チェックボックス

function addTab(link,name) { 
      // If tab already exist in the list, return 
      if ($("#" + $(link).attr("value")).length != 0) 
       return; 

      // hide other tabs 
      $("#tabs li").removeClass("current"); 
      $("#content div").hide(); 

      // add new tab and related content 
      $("#tabs").append("<li class='current'><a class='tab' id='" + 
       $(link).attr("value") + "' href='#'>" + name + 
       "</a><a href='#' class='remove'>x</a></li>"); 



      $("#content").append("<div id='" + $(link).attr("value") + "_content' style='width:100%; height:100%'></div>"); 
      var mid = $(link).attr("value")+"_content"; 

      tab1map(mid); 

      $("#" + $(link).attr("value") + "_content").show(); 


     } 

//タブのタブ間を移動するにはクリックしてください....

$('#tabs a.tab').live('click', function() { 

      var tabName= $(this).attr("id"); 

       var contentname = tabName+ "_content"; 
       // hide all other tabs 

       $("#content div").hide(); 

       $("#tabs li").removeClass("current"); 


       // show current tab 
       $("#" + contentname).show();tab1map(contentname); 

       $(this).parent().addClass("current"); 
      }); 

//地図の呼び出し....

のトップオフもののコードは、参考になる見て

function tab1map(mid) { 

     alert("Inside "+mid+" Map"); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById(mid), 
     myOptions); 

    $(mid).css("height","100%"); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title:"Hello World!" 
    }); 
    } 

Answer 1

私の頭はおそらく両方のマップが同じ要素IDを使用しているように聞こえるでしょう。

Answer 2

私はこれらの問題を解決しました。単に、マップキャンバスの<div> tag to <p>タグを変更して、次の行にマップ初期化関数を呼び出します。

$("#content").append("<p id='" + $(link).attr("value") + "_content' style='width:100%; height:100%'></p>"); 

var mid = $(link).attr("value")+"_content"; 

tab1map(mid);//Map initialization