Same Google map Displayed in two Tabs after modification in the map also

I two Tabs in my Jquery Application. In each tab i have Google map...These tabs are created dynamically by clicking on Checkbox in sidebar...For example if i click on first checkbox it will create a tab and its content(google map)...Again If i click another checkbox, it will create another tab and create its content...

While creating Tabs by using Checkbox the dynamic Tabs are created and its Google Map displayed Properly.

Here My problem is, When i click on Tabs(To navigate between Tabs) the google maps are not changing...Actually i have created a First tab and second Tab by using check boxes...

If i switch between Tabs after some changes in Map....then agin switch to the same Tab means it will display same Map as Lat tab...What is the problem here...

How to clear this issue....

//To add Tab Whenn Click on Check box

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();


        }

//Tab Click to navigate between Tabs....

$('#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");
            });

//Map Calling....

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).c开发者_如何学运维ss("height","100%");

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

---

I solved these issues....Simply change <div> tag to <p> tag for map canvas...then call map initialization function in following line.

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

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

tab1map(mid);//Map initialization

---

Seeing the code would be helpful, though off the top of my head I'd say it sounds like probably both your maps are using the same element id, which is frustrating any attempts made at keeping them separate.