GoogleMap API V3で地点一覧のリストをクリックすると地図上でマーカーの吹き出しを表示する

今回は、動的に地点データを読み込みんでマーカーを表示し、地図とは別に地点データをリストを表示します。
リスト表示した地点データのリンクをクリックすると、地図上で吹き出しを表示します。

基本は、前回と同じです。

変更点は、動的に読み込んだ地点データをHTMLとして出力する部分と、HTMLで出力したリンクをクリックした場合に吹き出しを表示するようにする部分です。

まず、HTMLにマーカーのリストを出力する部分を追加します。
marker_list内のolに地点データの番号つきリストを追加します。

    <div id="marker_list"><ol></ol></div>

次に、JavaScriptで動的に読み込んだマーカーデータを地図にセットする際にHTML出力を行います。
このように、１つのマーカーに対して、liタグに地点名でリンクを作成したデータを作り、marker_listに番号つきリストとして追加します。
そして、setLinkClickEventでこのリンクをクリックした場合の動作を設定しています。

      // マーカーの一覧出力・リンクのクリック時のイベント設定
      var lnk = $('<li>').append($('<a href="javascript:void(0)"/>').text(markerArray[i].title));
      $('#marker_list >ol').append(lnk);      
      setLinkClickEvent(lnk, marker);

setLinkClickEventは、リンクがクリックされた場合に、紐付いた地図上のマーカーのクリックイベントを呼ぶように指定します。

  /**
   * リンクのクリックイベントの登録
   */
  var setLinkClickEvent = function(lnk, marker){
    lnk.bind('click', function(){
      google.maps.event.trigger(marker, 'click');
    });    
  }

実際に表示直後の画面です。
f:id:pinoyuki:20120326233745p:plain