fzodiのプロフィール

いつも助けていただいています。 今回、表題のとおり3つのタブを設け、それぞれのタブにgoogle mapを表示させていますが、 2つ目、3つ目と切り替えると地図が正常に表示されません。 色々なサイトを参考にしていると、再読み込みをするとよい？というようなことが記載されていましたが、 まだコーディング歴が浅いものでこの場を借りてご助力を頂ければと思います。 該当項目を記載します。 【HTML】 <div id="contents"> <div id="tabmenu"> <ul> <li>タブ1</li> <li>タブ2</li> <li>タブ3</li> </ul> </div> <div id="box"> <div> <iframe src="google map"></iframe> </div> <div> <iframe src="google map"></iframe> </div> <div> <iframe src="google map"></iframe> </div> </div> </div> 【CSS】 iframe { width: 510px; height: 280px; } #contents { width: 800px; padding: 0; margin: 50px auto 0; } #tabmenu { margin: 0; width: 200px; padding: 0; float: left; } #tabmenu ul li { width: 242px; padding-bottom: 10px; font-size: 1.1em; display: block; text-align: center; list-style-type: none; cursor: pointer; } #box { width: 510px; float: right; } 【JavaScript】 $(function($) { var tabmenu = $('#tabmenu ul li'); $('#box div').hide(); $('#box div').eq(0).show(); tabmenu.eq(0).addClass('navhit'); tabmenu.click(function () { var no = $(this).parent().children().index(this); tabmenu.removeClass('navhit'); $(this).addClass('navhit'); $('#box div').hide().eq(no).show(); }); }); 足りないところが多くありご迷惑をおかけしますがよろしくお願い致します。