GoogleMAPとboostrapのタブ機能を連携するとすべて表示されない

こんにちは。

現在、boostrap3のタブ機能（tab1,tab2）を使用し、以下のように表示するページを考えています。

tab1 → カレンダー
tab2 → 地図

実装すると、tab2に地図を表示すると以下のように地図をすべて表示しません。

![イメージ説明]WIDTH:600

ただ、ブラウザのサイズを少し変更すると地図は表示されます。また、

tab1 → 地図
tab2 → カレンダー

にすると問題なく表示されます。

上記のようにtab2に地図を表示したときに最初から表示するにはどうしたらいいものか悩んでいます。もし、ご存じの方がいらっしゃいましたらご教授お願いいたします<(_ _)>

ソースコードです。

lang
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<link rel="stylesheet" href="components/bootstrap3/css/bootstrap.css">
6	<link rel="stylesheet" href="css/calendar.css">
7	
8	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
9	<style>
10		  #map-canvas{
11		    height:400px;
12                    max-width:none;
13		  }
14
15
16	</style>
17	
18	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
19	<script>
20	function initialize() {
21		var myLatlng = new google.maps.LatLng(34.6894052, 135.4992158);
22		var mapOptions = {
23		zoom: 17,
24		center:myLatlng
25		};
26
27		var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
28		var marker = new google.maps.Marker({
29		  position: myLatlng,
30		  map: map,
31		  title: 'Hello World!'
32		});
33	}
34		google.maps.event.addDomListener(window, 'load', initialize);
35	</script>
36	
37</head>
38<body>
39<div class="container">
40	
41	<ul class="nav nav-tabs">
42		<li class="active"><a href="#tab1" data-toggle="tab">予定</a></li>
43		<li><a href="#tab2" data-toggle="tab">地図</a></li>
44	</ul>
45<!-- / タブ-->
46<div id="myTabContent" class="tab-content">
47	<div class="tab-pane fade in active" id="tab1">
48	<div class="page-header">
49		<center>
50			<div class="btn-group">
51				<button class="btn btn-mini btn-primary" data-calendar-nav="prev"><< 前へ</button>
52				<button class="btn btn-mini" data-calendar-nav="today">今日</button>
53				<button class="btn btn-mini btn-primary" data-calendar-nav="next">次へ >></button>
54			</div><!--btn-group-->
55
56			<div class="btn-group">
57				<button class="btn btn-mini btn-warning active " data-calendar-view="month">月</button>
58				<button class="btn btn-mini btn-warning " data-calendar-view="week">週</button>
59				<button class="btn btn-mini btn-warning " data-calendar-view="day">日</button>
60			</div><!--btn-group-->
61		</center>
62				<h3></h3><!--見出し 年月-->
63	</div><!--page-header-->
64
65	<div class="row">
66		<div class="span12"><div id="calendar"></div><!--calendar--></div><!--span12-->
67	</div><!--row-->
68	
69
70	<script type="text/javascript" src="components/jquery/jquery.min.js"></script>
71	<script type="text/javascript" src="components/underscore/underscore-min.js"></script>
72	<script type="text/javascript" src="components/bootstrap3/js/bootstrap.min.js"></script>
73	<script type="text/javascript" src="components/jstimezonedetect/jstz.min.js"></script>
74	<script type="text/javascript" src="js/language/ja-JP.js"></script>
75	<script type="text/javascript" src="js/calendar.js"></script>
76	<script type="text/javascript" src="js/app.js"></script>
77
78	<script type="text/javascript">
79		var disqus_shortname = 'bootstrapcalendar'; // required: replace example with your forum shortname
80		(function() {;cript'); dsq.type = 'text/javascript'; dsq.async = true;
81			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
82			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
83		})();
84	</script>
85
86	
87	</div><!--tab1-->
88	<div class="tab-pane fade" id="tab2">
89	
90	<div id="map-canvas"></div>
91	</div><!--tab2-->
92</div><!--myTabContent-->
93	<a href="http://localhost/cake/schedule/regist">	<button type="button" class="btn btn-default">新規登録</button></a>
94</div><!--container-->
95</body>
96</html>
97