レジャースポットの定義をファイルに移動してデータとページを分離する

「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]));
}