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行目です.この部分が当該の機能であることは何となく分かるのですが,必要なオブジェクトの生成や,コールバックの意味あいといったところが分からなくて,どのように書いていけばいいのか分からないで困っています.
なにかアドバイスをいただけたらと思いますので,よろしくお願いいたします。
お礼
完全に私も同じで暇潰しですよw アプリの開発はどちらもできるので、暇があれば両方使用かと思います。 ありがとうございます。