Bootstrap3のタブ切り替えでGoogleMapを利用した外部ファイル読み込むときに、地図のサイズ変更ができない

bootstrap3とjqueryのload()を使ってタブによって読み込む内容(htmlかphpファイル)を切り替えるページを作っています。
その読み込むファイルの一つにGooleMapAPIを使って地図を埋め込むhtmlファイルがあるのですが、この地図のサイズを変更することができなくて困っています。
具体的には、widthとheightを指定してもその数値が反映されず、bootstrapのグリッド内に地図を埋め込むdiv要素を入れてもそこからはみ出してしまいます。

![要素の検証]WIDTH:600
上の画像のように、ブラウザでチェックしてみたところ、なぜか横300px、縦480pxという値が勝手に入っていて、これが上書き不可能であるために、サイズを変更できないものだと考えているのですが、
では、この数値はどこから指定されたもので、なぜ上書きできないのでしょうか？
また、本題として、この地図のサイズを変更するにはどのような解決策が考えられるでしょうか？

※> GoogleMAPとboostrapのタブ機能を連携するとすべて表示されないについての問題は、対象のタブの内容を読み込む前に別のタブコンテンツをすべてhide()することで一応解決している…と思います(が、もしかしたらこの部分がまだ不徹底のために、現在の状態に陥っているのでしょうか…)。

本体HTML HEAD部分

lang
$(function(){
  	
  	 $("#mapTab").click(function(){
  	   
  	 	$("#tab2").show();
  	 	
  		if($("#tab2").css("display") == "block"){
  			$("#tab1").hide();
  			$("#tab3").hide();
  			$("#tab4").hide();

  			$("#map-canvas").load("map.html");
  			$("#sample").load("sample.html");
  		}else{
  			alert("マップ読み込み失敗");
  		}
  	
  	});
})

本体HTML BODY部分

lang
<div class = "tab-pane fade" id = "tab2" style="display:none"> 
        <div class = "row">
    			<div class = "col-md-6 col-xs-12" style="margin-top:20px;background-color: red">
    				<div id = "sample"></div>
    			</div>
    	    
    			<div class = "col-md-6 col-xs-12" style="margin-top:20px;background-color: yellow">    				  <div id = "map-canvas" class = "col-md-3" style="background-color:blue"></div>
    			</div>
      </div> 
</div>

読み込む地図のファイル(map.html)

lang
<script>
	displayMap();
</script>

 	 <div id = "map" style="width:500px;height:600px"></div>
 	<!-- このwidthとheightが適用されない！！ -->
 	 
	 <div id="markerlistbox">
			<div class="markerlist_header">マーカーリスト</div>
			<ul class="markerlist">
				(省略)
			</ul>
	 </div>