「Googleマップの吹き出しをタブ形式で表示する」の中で、東京近郊レジャースポット案内というAjaxアプリを作りましたが、さらにレジャースポットの定義を別のファイルに移動し、データとWEBページを分離してみました。↓こんな感じです。
View example
WEBページのJavaScriptコードにあったレジャースポットの定義を…
var spots = [
// {lat: 緯度, lng: 経度, url: ブックマークURL}
{lat: 35.660347, lng: 139.729121, url: [
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1510',
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1789'
]}, // 六本木ヒルズ
…途中、省略…
];
次のように、WEBページとは別のテキストファイルに移動してアップロードします。ここではファイル名を「googlemapsjson.txt」としました。
googlemapsjson.txt
[
{lat: 35.660347, lng: 139.729121, url: [
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1510',
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1789'
]},
{lat: 35.665246, lng: 139.712319, url: [
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1556',
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1790'
]},
{lat: 35.634017, lng: 139.878595, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1557'},
{lat: 35.705646, lng: 139.751887, url: [
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1569',
'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1791'
]},
{lat: 35.639511, lng: 139.760170, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1570'},
{lat: 35.673770, lng: 139.762745, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1577'},
{lat: 35.707127, lng: 139.753046, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1578'},
{lat: 35.664915, lng: 139.762487, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1579'},
{lat: 35.621966, lng: 139.750750, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1580'},
{lat: 35.654995, lng: 139.796476, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1581'},
{lat: 35.664897, lng: 139.766908, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1586'},
{lat: 35.658639, lng: 139.745407, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1587'},
{lat: 35.689492, lng: 139.691699, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1588'},
{lat: 35.672428, lng: 139.755728, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1589'},
{lat: 35.676368, lng: 139.699359, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1590'}
]
WEBページのロードが完了したタイミングで、レジャースポットの定義をAjax.Request(prototype.js)を使って取得します。
function load() {
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(35.686302, 139.74575), 12);
Ajax.Requestの引数には前述の「googlemapsjson.txt」を指定します。そして、その「googlemapsjson.txt」を取得して、その取得したテキストをJavaScriptとして評価します。また失敗したときは、エラーメッセージを表示して終了します。
var request = new Ajax.Request('googlemapsjson.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++)
map.addOverlay(createMarker(spots[i]));
}
