「Google Mapsの測地系をYahoo!地図情報の測地系に変換するYGLatLng」の続きです。
「レジャースポットの定義をファイルに移動してデータとページを分離する」で作成したGoogle MapsとBLOGRANGERパーツのマッシュアップアプリをYahoo!地図情報に入れ替えてみました。↓こんな感じです。
↓trueを指定してスライドバーを有効にしました。地図の左上に表示されます。
var map = new YahooMapsCtrl('map', new YGLatLng(35.67063830229653, 139.77479730935804), 5);
map.setVisibleSliderbar(true);
↓trueを指定して、地図上のアイコンをクリックすると吹き出しを表示するようにしました。falseを指定すると、地図上のアイコンをポイントするだけで吹き出しが表示されます。ちなみにfalseが初期値です。
map.setEnableClickPopup(true);
↓前作のGoogle Mapsと同じくレジャースポットのデータをXMLHttpRequestを使ってサーバから取得しています。
var request = new Ajax.Request('spot.txt', {
method: 'get', asynchronous : false
}).transport;
if (request.status!=200)
return alert(request.status+' '+request.statusText);
var spots = eval('('+request.responseText+')');
↓レジャースポットのデータを繰り返しながら、地図上にアイコンを追加しています。
for (var i=0; i<spots.length; i++) {
var spot = spots[i];
if (spot.url.constructor != Array)
spot.url = [spot.url];
var popup = '';
for (var j=0; j<spot.url.length; j++) {
popup += '<iframe '
+ 'src="'+spot.url[j]+'" '
+ 'width="320" height="200" frameborder="0" '
+ 'marginwidth="2" marginheight="2" '
+ '></iframe>';
}
map.addIcon(i,
new YGLatLng(spot.lat, spot.lng),
popup,
'L1'
);
}
Yahoo!地図情報はアイコンに識別子(ID)を付与し、そのIDを指定してアイコンを操作するインタフェースとなっています。Google MapsのGMarkerのようにオブジェクトで扱えるとよかったのに。
アイコンをクリック(またはポイント)すると吹き出しを表示するという想定があるみたい。アイコンを操作したとき吹き出しを表示する以外にも表現方法があると思うのだけれど。そういうときはどう実装すればいいのだろう。
吹き出しに表示する内容は事前に指定しておく必要があるみたい。アイコンのクリックなど、イベントが発生するそのときに吹き出しに表示する内容を変えたいときはどう実装すればいいのだろう。
どうしてもGoogle Mapsと比較してしまいますね。もう少し使ってみるとYahoo!地図情報のコンセプトを感じ取れるかもしれません。Yahoo!地図情報と実装が同じ？(であろう)アルプス社のサイトも参考にしてみます。それまではGoogle Mapsとの比較を中心にいろいろと試してみます。
