GoogleMap API V3で地点一覧のリストをクリックすると地図上でマーカーの吹き出しを表示する
今回は、動的に地点データを読み込みんでマーカーを表示し、地図とは別に地点データをリストを表示します。
リスト表示した地点データのリンクをクリックすると、地図上で吹き出しを表示します。
基本は、前回と同じです。
変更点は、動的に読み込んだ地点データをHTMLとして出力する部分と、HTMLで出力したリンクをクリックした場合に吹き出しを表示するようにする部分です。
まず、HTMLにマーカーのリストを出力する部分を追加します。
marker_list内のolに地点データの番号つきリストを追加します。
<div id="marker_list"><ol></ol></div>
次に、JavaScriptで動的に読み込んだマーカーデータを地図にセットする際にHTML出力を行います。
このように、1つのマーカーに対して、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'); }); }
実際に表示直後の画面です。
ここで、「南京町広場」をクリックすると以下のようになります。
マーカーをクリックした場合と同じように、吹き出しが表示されるように、地図の表示エリアが自動的に変わります。
すべてのソースは、githubに置きました。
https://github.com/pinoyuki/Sample-of-study/tree/master/GoogleMap/Sample4