テキストファイルの取得

広告

ここからはより具体的な使い方を確認していきます。データとしては1つの地点について座標と名称からなるものを用意し、それを読み込んで利用する方法を確認します。

今回はCSV形式のテキストファイルを用意します。 

41.759052,140.703878,函館山
41.766711,140.717783,赤レンガ倉庫
41.772596,140.725261,函館朝市

まずは読み込んだデータをStringクラスのsplitメソッドを使い改行をデリミタとして行毎に分割します。 

function createMap(data, statusCode){
  var lines = data.split("¥n");

  for (var i = 0 ; i < lines.length ; i++){
    /* ... */
  }
}

1行単位で分割されたデータを今度はカンマをデリミタとして分割します。 

function createMap(data, statusCode){
  var lines = data.split("¥n");

  for (var i = 0 ; i < lines.length ; i++){
    var vals = lines[i].split(",");

    var lat = vals[0];
    var lng = vals[1];
    var name = vals[2];
  }
}

後は取得した座標や名称に応じて必要な処理を行います。

サンプルプログラム

では試してみます。

code2_1.js 

var map;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(41.764702,140.71671), 13);

    GEvent.addListener(map, "click", clickAction);
  }
}

function downloadData(){
  GDownloadUrl("data.txt", function dispData(data, statusCode){
    var lines = data.split("¥n");

    for (var i = 0 ; i < lines.length ; i++){
      var vals = lines[i].split(",");

      var lat = vals[0];
      var lng = vals[1];
      var name = vals[2];

      map.addOverlay(createMarker(lat, lng, name));
    }
  });
}

function createMarker(lat, lng, name) {
  var marker = new GMarker(new GLatLng(lat, lng));

  var html = "<p>" + name + "</p>";
  GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

map2_1.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：テキストファイルの取得</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code2_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>

    <form>
    <p>
    <input type="button" id="btn" value="ダウンロード" onclick="downloadData()" />
    </p>
    </form>

  </body>
</html>

data.txt 

41.759052,140.703878,函館山
41.766711,140.717783,赤レンガ倉庫
41.772596,140.725261,函館朝市

ではブラウザで上記のURLを見てみます。

p2-1

地図下の「ダウンロード」ボタンを押すと、サーバからファイルを取得し、ファイルに書かれていた3つの地点にマーカーを設置します。

p2-2

マーカーをクリックすると、その地点の名称が記載された情報ウィンドウを表示します。

p2-3

( Written by Tatsuo Ikura )