GoogleMapsで<UL>タグとの連携
http://bit.ly/7Gt3Cp のサンプルのように，キャンバスの右側（デモは左側になっておりますが）に＜UL＞タグのリストを配置して，それぞれのリンクをクリックすると，該当するマーカーがマップの中央にくるようにPantoで移動するようにしたいと思います．
サンプルのコードは，ランダムマーカーだったのと，コードの書き方がすこし特殊な感じで（最初にvar Demoを宣言し，その中にすべての処理を書き込んでいく方法？）あまり参考にできなかったので，別のサンプルを参考にして，JSON形式のデータを取り込むコードを書きました．
<html lang="ja">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// JSON読み込み
$.ajax({
url:"students.js",
cache:false,
dataType:"json",
success:function(json){
var data=jsonRequest(json);
initialize(data);
}
});
});
function jsonRequest(json){
var data=[];
//データ全体のラベルはstudentsで，各データは”branch","name","age","lat","lng"などのラベルを持っています
if(json.students){
var n=json.students.length;
for(var i=0;i<n;i++){
data.push(json.students[i]);
}
}
return data;
}
function initialize( data ){
var op={
zoom:12,
center:new google.maps.LatLng(34.7417512 , 135.3269878 ),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map_canvas"),op);
var i=data.length;
while(i-- >0){
var dat=data[i];
var obj={
position:new google.maps.LatLng(dat.lat,dat.lng),
map:map,
title:dat.name
};
var marker=new google.maps.Marker(obj);
}
}
</script>
</head>
<body>
<div id="map_canvas" style="width:100%;height:100%"></div>
</body>
</html>
このコードをベースにしていきたいのですが，どこをどうすれば良いのか見当がつきません．
// Generate list elements for each marker.
var li = document.createElement('li');
var aSel = document.createElement('a');
aSel.href = 'javascript:void(0);';
aSel.innerHTML = 'Open Marker #' + n;
aSel.onclick = Demo.generateTriggerCallback(marker, 'click');
li.appendChild(aSel);
ul.appendChild(li);
上記はリンク先145行目～152行目です．この部分が当該の機能であることは何となく分かるのですが，必要なオブジェクトの生成や，コールバックの意味あいといったところが分からなくて，どのように書いていけばいいのか分からないで困っています．
なにかアドバイスをいただけたらと思いますので，よろしくお願いいたします。
お礼