タブパネルでGoogle Mapを表示させる

タブパネルでGoogle Mapを表示させる際、最初に表示されるページにGoogle Mapを設置していれば問題ないが、最初に表示されないタブ内に設置していた場合、initialize処理が別途必要になるので、メモ。

例に２枚タブ構成のスクリプトを示す。

      <div id="tabs" class="tabs">
        <nav>
          <ul>
            <li><a href="#section-1"><i class="fa fa-list-ul">タブ１</i></a></li>
            <li><a href="#section-2" ><i class="fa fa-map-marker">タブ２</i></a></li>
          </ul>
        </nav>
        <div class="content">
          <!-- Time Line view -->
          <section id="section-1">
            <div class="mediabox">
              <h3>最初に表示されるタブ</h3>
            </div>
          </section>

          <section id="section-2">
            <div class="mediabox">
              <h3>Google Mapエリア</h3>
              <div id="map_canvas" style="width:500px; height:300px"</div>
            </div>
          </section>

        </div><!-- /content -->

いつもどおりのGoogle Mapのinitialize処理は以下。

    <script>
      //initialize google map
      function initialize() {
        var latlng = new google.maps.LatLng(35.539001,134.228468);
        var opts = {
          zoom: 13,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
      }
      google.maps.event.addDomListener(window, "load", initialize);
    </script>

今回は、タブ２にGoogle Mapが埋め込まれ、初回ページロード時にinitializeが走らない。 そこで、以下のようにして、初回タブ２クリック時にのみinitializeが実行されるようにスクリプトを追加。

      $(function(){
        $("#map-tab").one(
          'click',
          function(){
            initialize();
          }
        );
      });

これで、初回表示画面以外のタブにGoogle Mapを設置した場合でも、地図が表示されるようになる。