JavaScriptを使って外部ファイルを読み込む方法

こんにちわ、開発者のⅠです。

さて、前回から時間が空いてしまいましたが、GooｇleMapに関わるお話の続きです。

前回は、Google Mapにマーカーを表示させる方法について紹介いたしましたが、今度はその応用として、マーカーのデータを外部ファイルから読み込む方法について紹介したいと思います。

今回は、名前、住所、座標(緯度と経度)を記録したCSVファイル(拡張子： .csv)を読み込む場合を例として挙げたいと思います。

まず、外部ファイルを読み込むために必要な関数 getCSVFileをMapオブジェクト宣言の下に記述します。

 
　function getCSVFile() {
　　　var xhr = new XMLHttpRequest();
　　　xhr.onload = function () {
　　　createArray(xhr.responseText);
　　　};

　　　xhr.open("get", "markerlist.csv", true);
　　　xhr.send();
　}
　getCSVFile();

次に、読み込んだCSVファイルのデータをsplitメソッドを使って "\n(改行コード)"毎に配列へ振り分けます。
続けて ", (カンマ) "毎に振り分けていきます。
そして、カンマで区切った名前、住所、座標の各データを変数name、address、latlngにそれぞれ代入します。
あとは、関数 createMarkerでマーカー生成し、インフォウインドウ(吹き出し)の中身をHTML形式で記述します。

function createArray(csvData) {
   var DataArray = csvData.split("\n");
   var csvArray = new Array();
   for (var i = 0; i < DataArray.length; i++) {
    csvArray[i] = DataArray[i].split(",");
   }

   insertData(csvArray)
  }

  
  function insertData(csvArray) {
   for (var i = 0; i < csvArray.length; i++) {

    // 配列csvArray[i][0]を変数nameに格納 
    var name = csvArray[i][0];

    // 配列csvArray[i][1]を変数addressに格納 
    var address = csvArray[i][1];

    // 配列csvArray[i][2]とcsvArray[i][3]を変数latlng に格納 
    var latlng = new google.maps.LatLng(csvArray[i][2], csvArray[i][3]);


    // 関数createMarkerに引数を指定します 
    createMarker(name, address, latlng, map)
   }
  }
 }

 // 引数で渡された値を変数に代入し｛｝内の処理を実行 
 function createMarker(name, address, latlng, map) {

  // InfoWindowクラスのオブジェクトを作成 
  var infoWindow = new google.maps.InfoWindow();

  // 指定したオプションを基にマーカーを作成 
  var marker = new google.maps.Marker({ position: latlng,  map: map });

  // addListener を使ってイベントリスナーを追加 
  // 地図上のマーカーがクリックされると｛｝内の処理を実行。
  // currentInfoWindowに値が入っているならば、既に開いている情報ウィンドウを閉じる 
  // 表示される情報ウィンドウは常に一つ 
  google.maps.event.addListener(marker, 'click', function () {
   
    if (currentInfoWindow) {
     currentInfoWindow.close();
    }

    // InfoWindowOptionsオブジェクトを指定します
    // HTML形式で記述する
    infoWindow.setContent(
    '
' + '
' + name + '
'+ 
'
' + address + '
' + '
'
    );

    // マーカーに情報ウィンドウを表示 
    infoWindow.open(map, marker);

    // 開いた情報ウィンドウを変数へ格納 
    currentInfoWindow = infoWindow;
   
  });
 }
 // ページ読込時に地図を表示 
 google.maps.event.addDomListener(window, 'load', initialize);

これで、マーカーの情報を外部ファイルから読み込むことが出来るはずです。
こうすれば、マーカーの追加・削除はソースコードではなく外部ファイルを編集するだけで済みますね。

それでは、今日はこの辺りで失礼します。