sidebar-v2でサイドバーを直接操作する

google map apiを使ってwebサービスを作る上で、以下のコードを使うことでサイドバー機能を追加することができます。

github.com

sidebar追加例

このgitコードを使う際に、サイドバーを直接操作する使い方メモ。

<!--中略-->
<!-- Tab panes -->
<div class="sidebar-content">
  <div class="sidebar-pane" id="home">
    <h1 class="sidebar-header">sidebar-v2</h1>
    <span id="home-contents">home</span>  
  </div>
</div>
<!--中略-->
<script>
function initialize() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(51.2, 7),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
  });
}
//sidebarオブジェクトの生成
var sidebar = $('#sidebar').sidebar();

//sidebarをタブ指定で開く
//div class="sidebar-pane"で指定したタブのid
sidebar.open("home");

//sidebarを閉じる
sidebar.close();

//sidebarの内容を変更する
var home_contents = document.getElementById('home-contents');
home_contents.innerHTML = '<span id="home-contents">home</span>';

</script>