ローカルファィルの読込

　HTML5 以前は、JavaScriptでローカルファイルを読み込むことが出来ませんでしたが、HTML5では限定条件（ユーザーによる操作が必須）ながらFile API を使用して、読み込むことが出来ます。( 文字コードは原則 UTF-8 参考 ) 　[ファイルの書出しはこちら]　
　ここでは、その具体的な例を見てみます。　参考１　参考２　参考３　参考４　参考５　参考６
　注１.　同一サイト上にあるファイルの読込は html5以前から出来ます。　参考１　参考２　参考３　参考４
　注２.　一般的に、ローカルファイルの読込には閲覧者側で何らかの操作が必要です。
　注３.　便法として、js ファイルの配列などとしておくと、json 等も js ファイルとして読込むことができます

■ ローカルファイルを読込む

　　ここでは、FileReader でファイルを読み込みます。そのサンプルリストで見てみます。↓

<!DOCTYPE html>  
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>File 読み込み</title>
  <script>
    <!--
      function init(){
        var file = document.querySelector('#getfile');
        // input 変化時に読み込む
        file.onchange = function (){
          var fileList = file.files;
          var reader = new FileReader();
          reader.readAsText(fileList[0]);
          //読み込み後表示
          reader.onload = function  () {   
            document.querySelector('#preview').textContent = reader.result;
          };
        };
      };
    // -->
  </script>
</head>
<body onload="init();">
  <input type="file" id="getfile" accept="text/*" >
  <pre id="preview" ></pre>
</body>
</html>

　[注意]　ブラウザが HTML5 対応で、FileReader を利用出来ることが必要です
( 9行目)　id = #getfile のファイルを取り込みの対象となるように設定しておきます
(11行目)　「onchange」が対象 <input> の取り込みのトリガーとなります
(13行目)　FileReader でファイル(推奨文字コード: UTF-8)を読み込みます
(14行目)　読み込んだデータを readAsText で取り込みます
(17行目)　fileList[0]として読み込んだ内容を「 #preview 」に書き出します。　(table 表示)

【左記の例】　下図クリックで起動

【参考サイト】

■ ローカルの jsonファイルを読込む

　　ここでは、FileReader でjsonファイルを読み込みます。そのサンプルリストで見てみます。↓
　　＊単にファイルデータを読込むなら、JavaScriptファイルとして利用するほうが簡単です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>json 読込み</title>
  <style>
    input[type="file"] { opacity: 0; visibility: hidden; position: absolute; }
    label { padding:6px 3px; margin: 0 0 6px; background: #666; 
      color: #ffe; display: inline-block; cursor: pointer; }
    #preview{ width:500px; height:160px; padding:8px; background:#ffe; }
  </style>
  <script>
      function init(){
        var file = document.querySelector('#getfile');
        // input 変化時に読み込む
        file.onchange = function (){
          var fileList = file.files;
          var reader = new FileReader();
          reader.readAsText(fileList[0]);
          //読み込み後表示
          reader.onload = function  () {   
            document.querySelector('#preview').textContent = reader.result;
                 var txt = reader.result.replace(/[\n\r]/g,"");  
                 txt = eval("(" + txt + ")");  
                 var data = txt.学生;        //  key でデータを選択
                 for(var record of data){
                   datatable.innerHTML += `<tr><td>${record['番号']}</td><td>${record['氏名']}</td><td>${record['学部']}</td></tr>` 
                 }
          };
        };
      };
  </script>
</head>
<body onload="init()">
  <label>
    <input type="file" id="getfile" accept="text/*" >ファイルを選択
  </label> (test01.json)
  <pre id="preview" >ここに jsonファイルの内容を表示</pre>  
  <table border=1>
    <thead><tr>
        <th>学生番号</th><th>氏名</th><th>学部</th>
    </tr></thead>
    <tbody id="datatable"></tbody>
  </table>
</body>
</html>

　[注意]　ブラウザが HTML5 対応で、FileReader を利用出来ることが必要です
(14行目)　id = #getfile のファイルを取り込みの対象となるように設定しておきます
(16行目)　「onchange」が対象 <input> の取り込みのトリガーとなります
(18行目)　FileReader でファイル(UTF-8 推奨)を読み込みます
(19行目)　読み込んだデータを readAsText で取り込みます
(22行目)　fileList[0]として読込んだ内容を「 #preview 」に書き出します
(23行目)　読込んだテキストを改行等を取り除き取込みます
(25行目)　読込んだデータの内、キー"学生"を取込みます
(27行目)　読込んだデータを各行毎に表に書込みます
(43行目)　データ書き出し要素を用意しました

【左記の例】　下図クリックで起動

【参考サイト】

■ ローカルファイルをドラッグして読み込む

　　ファイルをドラッグすることでFileReader を起動して、ファイルを読み込むことも出来ます。↓

<!DOCTYPE html>  
<html lang="ja">
<head>
  <meta charset=UTF-8 />
  <title>File API Sample</title>
  <style type="text/css">
    <!--
    body { line-height:1.5em; }
    .page { width:620px; margin: 0 auto; padding:5px; background:#efe; }
    #code { flex:1; margin: 5px 5px; padding:13px 0 8px 0;  } 
    #drop { flex:3; margin:5px 10px; padding: 13px 75px 8px 15px; border:3px #aaa dotted; }
    #disp { flex:1; height:200px; margin:3px; padding:5px; border:1px #3d3 solid; }
    -->
  </style>
</head>
<body>
  <div class="page" >
    <section id="main">
        　画像かテキスト(UTF-8 推奨)の１つ以上のファイルをドラッグ&ドロップすると、そのファイルが表示されます。<br>
	<div id="code">
            <span style="flex:1;">　文字コード
               <select id="encode-type">
                  <option value="utf-8">utf-8</option>
                  <option value="shift-jis">shift-jis</option>
               </select>
            </span>
            <span id="drop" ondragover="onDragOver(event)">
              ここにファイルをドロップします。</span>
        </div>
        <div id="disp" >ここにドロップしたファイル名とその内容を表示します。</div>
        <script type="text/javascript">
            if (window.File) {
                // File APIに関する処理を記述
            //    window.alert("File APIが実装されてます。");
                document.getElementById("drop").addEventListener("drop", onDrop, false);
            } else {
                window.alert("本ブラウザではFile APIが使えません");
            }
 
	    // Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
	    function onDrop(event){
	       var files = event.dataTransfer.files;
	       var disp = document.getElementById("disp");
	       var encode_type = document.getElementById("encode-type").value;
	       disp.innerHTML ="";
 
               // 複数のファイルから1つずつファイルを選択
	       for(var i=0; i< files.length; i++){
	          var f = files[i];
		  // ①FileReaderオブジェクトの生成
		  var reader = new FileReader();
		  // ②画像ファイルかテキストファイルかを判定
		  if(!f.type.match('image.*') && !f.type.match('text.plain') && !f.name.match(/csv$/m)){
		     alert("画像ファイルとテキストファイル以外は表示できません。");
		     continue;
		  }
                  // ③エラー発生時の処理
		  reader.onerror = function (evt) {
	             disp.innerHTML = "読み取り時にエラーが発生しました。";
	          }
                  // ④画像ファイルの場合の処理
		  if (f.type.match('image.*')) {
		     // ファイル読取が完了した際に呼ばれる処理
		     reader.onload = function (evt) {
		        var li = document.createElement('li');
		        var img = document.createElement('img');
		        img.src = evt.target.result;
		        li.appendChild(img);
		        li.innerHTML += "<br />";
		        disp.appendChild(li);
		     }
		     // readAsDataURLメソッドでファイルの内容を取得
		     reader.readAsDataURL(f);
	          }
                  // ⑤テキストファイルの場合の処理
		  if (f.type.match('text.*') || f.name.match(/csv$/m)) {
		     // ファイル読取が完了した際に呼ばれる処理
		     reader.onload = function (evt) {
		     // FileReaderが取得したテキストをそのままdivタグに出力
		        disp.innerHTML ="[ "+ f.name+"]<br/>"+reader.result;
		     }
		     // readAsTextメソッドでファイルの内容を取得
		     reader.readAsText(f, encode_type);    // 'utf-8' 'shift-jis' ･････
		  }
	       }
	        // ⑥ブラウザ上でファイルを展開する挙動を抑止
	        event.preventDefault();
	    }
 
	    function onDragOver(event){ 
	       // ⑥ブラウザ上でファイルを展開する挙動を抑止
	       event.preventDefault(); 
	    }
        </script>
    </section>
  </div>
</body>
</html>

　[注意]　ブラウザが HTML5 に対応していて、FileReader を利用出来ることが必要です
(22行目)　読み込みファイルを表示する文字コードを選択します
(27行目)　ドラッグするエリアを用意します
(30行目)　読み込みファイル名とその内容を、表示するエリアを用意します
(35行目)　読み込みファイルがドロップされると表示機能を起動します
(41行目)　ファイルがドロップされたときに起動する function です
(48,49行目)　複数の読み込みファイルに対応します
(51行目)　FileReaderオブジェクトを生成します
(53行目)　読み込みファイルのタイプを画像とテキスト(csvを含む)に制限します
(62行目)　画像ファイルの場合の処置
(73行目)　画像ファイルを取得します。参考
(76行目)　テキストファイル(csvを含む)の場合の処置
(80,83行目)　テキストファイル名と内容を取得します。参考
(87,92行目)　ファイルを展開を抑止する手当。参考

【左記の例】　下図クリックで起動

【参考サイト】

■ 読み込みファイルからグラフ表示　　他の例

　以上のように、「ユーザーによる操作」があれば、HTML5 ではローカルファイルを読み込むことが出来ることが判ります。
　さらに「dygraphs」を使って、このデータからグラフを書いてみます。↓　なお「dygraphs」は、こちらからダウンロードすることも出来ます。

<!DOCTYPE html>  
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>File 読み込みテスト</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://dygraphs.com/1.1.1/dygraph-combined-dev.js"></script>
  <script>
      function init(){
        var file = document.querySelector('#getfile');
        file.onchange = function (){
          var fileList = file.files;
          var reader = new FileReader();
          reader.readAsText(fileList[0]); // onchange時に読込む
          reader.onload = function() {   //読込み後グラフ表示
              ma= reader.result.split("\n"); mas2 = ma.length-2;
              mc = ma[0].split(",");
              alert(mas2+" 地点の "+mc[0]+"; "+mc[1]+","+mc[2]+" を読込ました"); 
              g = new Dygraph( document.getElementById("graph"), reader.result,{
                  showRoller: false, valueRange: [0,100]
              } );
          };
        };
      };
  </script>
</head>
<body onload="init();">
  <input type="file" id="getfile" accept="text/*">
  <div id="graph"></div>
</body>
</html>

( 7行目)　「dygraphs」の JavaScript を読み込みます
(11行目)　「onchange」で目的ファイルを読み込みを開始します
(13行目)　「FileReader」で目的ファイルを読み込みます
(19行目)　表示データを書込みます
(20行目)　グラフ表示のオプションを読み込みます

【左記の例】　下図クリックで起動

【参考サイト】

■ 読込ファイルで google map に追記

　google map にローカルファイル(csv)を読み込んで地点マークを追加するようなことも出来ます。↓

<!DOCTYPE html>  
<html lang="ja">
<head>
    <title>Google Maps csv</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=【API key】"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window,'load',function(){
          var mapOptions = {
                zoom: 11,
                center: new google.maps.LatLng(35.683289,139.819259),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true
          };
          var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions);
          // input 変化時に'#getfile'のファイルを読み込む ---------
          var file = document.querySelector('#getfile');
          file.onchange = function (){
            var fileList = file.files;
            var reader = new FileReader();
            reader.readAsText(fileList[0]);
 
            //読み込み後、配列に取り込む --------------------------
            reader.onload = function() {
              ma = new Array(); mb = new Array();
              ma= reader.result.split("\n"); mas2 = ma.length-2;
              mc = ma[0].split(",");
              alert(mas2+" 地点の "+mc[0]+"; "+mc[1]+","+mc[2]+" を読込ました"); 
              stat= new Array(); 
              // 配列からマーカーを作成
              for (i=1;i<=mas2; i++ ){
                  stat = ma[i].split(",");
                  var latlng = new google.maps.LatLng(stat[1],stat[2]);
                  var marker = new google.maps.Marker({
                    position: latlng,
                    map: mapObj,
                    title: stat[0]
                  });
              };
            };   // end of reader.onload --------------
          };     // end of file.onchange --------------
        });
    </script>
</head> 
<body onload="init();">
  <div style="width:800px; margin: 0 auto;">
    マーク地点の csvファイルを選択　<input type="file" id="getfile" accept="text/*" size=30 />
    <pre id="preview" ></pre>
    <div id="gmap" style="margin: auto; width:100%; height:500px;"></div>
  </div>
</body>
</html>

( 6行目)　「google maps API」の JavaScript を読み込みます
( 8行目)　ページロード時 google maps を表示します
(15行目)　google maps でマップベースを表示します
(18行目)　ファイルを読み込み後のマーク表示処理をします
(24行目)　マーク表示のため、データを配列に書込ます
(31行目)　各地点のマークデータを書き込みます

【左記の例】　下図クリックで起動

【参考ページ】

■ local保存した JSONで leaflet.js map に追記

　leaflet.js map にJSONファイルを読み込んで地点マークを追加するようなことも出来ます。↓

<!DOCTYPE html>  
<html>
<head>
  <meta charset="UTF-8">
  <title>JSON データのマーカー設置</title>
  <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css">
  <style>
    body { line-height:1.5em; font-size:12px; }
    h2 { text-align:center; height:1.3em; margin: 0 ; padding:3px; }
    .page { width:1400px; height:90vh; margin: 0 auto; padding:3px; background:#efe; display:flex; }
      #main{ width:365px; margin-right:3px; }
        #inbox { padding: 5px;  }
          #inbox input{ width:120px; margin:2px 0; }
        #view { height:500px; margin:3px; padding:5px 8px 3px 5px; border:1px #3d3 solid; overflow:auto; background:#eee; word-wrap: break-word; }
        #sample{ height:200px; margin:3px; padding:4px 8px; overflow:auto; background:#ffe; word-wrap: break-word; }
      #mapDiv{ flex:3; border:1px #3d3 solid; }
  </style>
</head>
<body>
  <h2>データを JSON で保存して、地図マーカーに表示</h2>  
  <div class="page" >
    <section id="main">
      <div id="inbox">
        id:　<input id="id_id" type="text" placeholder="G01">　
        場所:<input id="id_sta" type="text" placeholder="渋谷駅"><br>
        url:  <input id="id_url" type="text" placeholder="場所情報ページ url" style="width:280px;"><br>   
        緯度:<input id="id_lat" type="text" placeholder="35.658868">　
        経度:<input id="id_lng" type="text" placeholder="139.701879"><br>
        <p>
          <button onclick="ClearValue()">全消去</button>・<button onclick="re_load()">例引用</button>
          <button onclick="set()">追加入力</button>
          <button onclick="data_view()">data確認</button>→
          <button onclick="initMap()">map表示</button>
        </p>
      </div>
      <div id="view">ここに「確認」時 JSONの内容を表示</div>   
      <div id="sample">
        <h2>【JSON の例】</h2>
            {"id":"G01","sta":"渋谷駅","url":"https://www.tokyometro.jp/rosen/eki/shibuya/index.html","addr":"東京都渋谷区渋谷2-24-3","lat":35.658868,"lng":139.701879},<br>
            {･･･････････････},<br>
       {"id":"G19","name":"浅草駅","url":"https://www.tokyometro.jp/station/asakusa/index.html","lat":35.709993,"lng":139.797243}
      </div>
    </section>
    <section id="mapDiv">　ここに地図を表示</section>
  </div>
 
  <script>
    let datum = {};  // 連想配列
    let stData = [], data = [];
    let mapobj, marker = [], infoWindow = [];
  
    function set() {   // 新規 dataを JSONで保存
      stData = localStorage.getItem('json'); // 保存済みデータの呼び出し
      data = JSON.parse( stData ); // JSONをオブジェクトデータの形式に変換
      
      datum.id = document.getElementById("id_id").value;
      datum.lat = document.getElementById("id_lat").value;
      datum.lng = document.getElementById("id_lng").value;
      datum.name = document.getElementById("id_sta").value;
      datum.url = document.getElementById("id_url").value;
      if( data == null ){ 
        data = []; data[0] = datum;
      } else { 
        data.push( datum ); 
      }; 
      localStorage.setItem('json', JSON.stringify( data ) ); // キーが 'json'のデータとして保存
    }
 
    function re_load() { // サンプルデータを JSONで保存
      stData = [         // サンプルデータ
       {"id":"G01","name":"渋谷駅","url":"https://www.tokyometro.jp/station/shibuya/index.html","lat":35.658868,"lng":139.701879},
       {"id":"G02","name":"表参道駅","url":"https://www.tokyometro.jp/station/omote-sando/index.html","lat":35.665246,"lng":139.712317},
       {"id":"G03","name":"外苑前駅","url":"https://www.tokyometro.jp/station/gaiemmae/index.html","lat":35.670532,"lng":139.717855},
       {"id":"G04","name":"青山一丁目駅","url":"https://www.tokyometro.jp/station/aoyama-itchome/index.html","lat":35.672768,"lng":139.724164},
       {"id":"G05","name":"赤坂見附駅","url":"https://www.tokyometro.jp/station/akasaka-mitsuke/index.html","lat":35.677021,"lng":139.737052},
       {"id":"G06","name":"溜池山王駅","url":"https://www.tokyometro.jp/station/tameike-sanno/index.html","lat":35.673631,"lng":139.741419},
       {"id":"G07","name":"虎ノ門駅","url":"https://www.tokyometro.jp/station/toranomon/index.html","lat":35.670227,"lng":139.749833},
       {"id":"G08","name":"新橋駅","url":"https://www.tokyometro.jp/station/shimbashi/index.html","lat":35.66661,"lng":139.758121},
       {"id":"G09","name":"銀座駅","url":"https://www.tokyometro.jp/station/ginza/index.html","lat":35.671981,"lng":139.763971},
       {"id":"G10","name":"京橋駅","url":"https://www.tokyometro.jp/station/kyobashi/index.html","lat":35.676843,"lng":139.77011},
       {"id":"G11","name":"日本橋駅","url":"https://www.tokyometro.jp/station/nihombashi/index.html","lat":35.682418,"lng":139.773924},
       {"id":"G12","name":"三越前駅","url":"https://www.tokyometro.jp/station/mitsukoshimae/index.html","lat":35.684891,"lng":139.773163},
       {"id":"G13","name":"神田駅","url":"https://www.tokyometro.jp/station/kanda/index.html","lat":35.691696,"lng":139.770888},
       {"id":"G14","name":"末広町駅","url":"https://www.tokyometro.jp/station/suehirocho/index.html","lat":35.702973,"lng":139.771717},
       {"id":"G15","name":"上野広小路駅","url":"https://www.tokyometro.jp/station/ueno-hirokoji/index.html","lat":35.707678,"lng":139.772881},
       {"id":"G16","name":"上野駅","url":"https://www.tokyometro.jp/station/ueno/index.html","lat":35.711813,"lng":139.775858},
       {"id":"G17","name":"稲荷町駅","url":"https://www.tokyometro.jp/station/inaricho/index.html","lat":35.711295,"lng":139.782599},
       {"id":"G18","name":"田原町駅","url":"https://www.tokyometro.jp/station/tawaramachi/index.html","lat":35.709901,"lng":139.790932},
       {"id":"G19","name":"浅草駅","url":"https://www.tokyometro.jp/station/asakusa/index.html","lat":35.709993,"lng":139.797243}
      ];
      localStorage.setItem('json', JSON.stringify( stData ) ); // キーが 'json'のデータとして保存
    }
 
    function ClearValue() {    // localStorageとその表示をクリア
      if (!window.localStorage != null) {
        window.localStorage.clear();   // localStorageをクリア
        document.getElementById("view").innerText = "ここに「確認」時内容を表示";
      }
    }
 
    function data_view() {    // 保存済 JSONを確認する
      data = localStorage.getItem('json'); // 保存済みデータの呼び出し
      let stDataV = JSON.parse( data ); // JSONをオブジェクトデータの形式に変換
      let text ="";
      for (let i = 0; i < stDataV.length; i++) {
        for (let key in stDataV[i]) {
          text += ( stDataV[i][key] + ", ");
        }
        text += "\n";
      }
      document.getElementById("view").innerText = text;  // "view"に表示する
    }
    
    function initMap(){  // 保存済みデータを使い leaflet mapのマーカーを記述
      data = localStorage.getItem('json');  // 保存済みデータの呼び出し
      let mkData = JSON.parse( data );  // JSONをオブジェクトデータの形式に変換
      
      if( mapobj != undefined) {  // 旧 map表示を消去する
        mapobj.remove();
        mapobj = undefined
        document.getElementById('mapDiv').innerHTML = "";
      }
      
      mapobj = L.map('mapDiv');   // mapobjの設定
      L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
      }).addTo(mapobj);
      //マーカー全体が入るボックスを作る
      bound = L.latLngBounds( [ mkData[0].lat, mkData[0].lng ], [ mkData[0].lat, mkData[0].lng ] );
 //     bound = L.latLngBounds( [35.684891, 139.749833], [35.684891, 139.749833] );
      // mkの設定でマーカーを追加
      for (var num in mkData) {
        let mk = mkData[num];
        let popup = L.popup().setContent( "<a href= '" + mk.url + "' target='_blank'>" + mk.name + "</a>" );
        L.marker( [mk.lat,mk.lng], { title: mk.name }).bindPopup(popup).addTo( mapobj );
        bound.extend( [mk.lat,mk.lng] ); // マーカー全体が入るようにボックスを広げる
      }      
      mapobj.fitBounds(bound); // マーカー全体が入るように地図範囲を設定する
    }; // initMap()  -----------------------
 
    // マーカーにクリックイベントを追加
    function markerEvent(i) {
      marker[i].addListener('click', function() { // マーカーをクリックしたとき
        infoWindow[i].open( mapobj, marker[i] ); // 吹き出しの表示
      });
    }
    
  </script>
</body>
</html>

( 6-7行)　「leaflet.js」の JavaScript と css を読み込みます
( 17行目)　map の表示エリアを確保します
( 25-29行) 新規データの入力項目
( 31-34行) 入力制御ボタンを設置します
( 53行～)　新規 dataを JSONで保存する関数
( 70行～)　サンプルデータを JSONで保存する関数
( 95行～)　localStorageとその表示をクリアする関数
(102行～)　保存済 JSONを確認する関数
(115行～)　保存JSONデータを使い leaflet mapとそこのマーカーを記述する関数
(143行～)　マーカーをクリックで削除する関数

【左記の例】　下図クリックで起動

【参考ページ】

■ JSONファイルを jsファイル化して読み込む　(操作不要で外部データ読込み)

　JSONファイルを jsファイル化すると、localでも操作なしで読み込むことが出来ます。↓ 　参考１　参考２　参考３

<!DOCTYPE html> 
<html lang="ja">
<head>
  <meta charset="UTF-8" >
  <style>
    h3{ margin:5px; text-align:center; }
    #gmap{ width:98vw; height: calc(98vh - 40px); margin:0px auto 5px;}
  </style>
<script>
  let Mymap;
  function initMap() {
    Mymap = new google.maps.Map(document.getElementById('gmap'), {
      zoom: 13,
      center: new google.maps.LatLng(35.684891, 139.758121),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    //jsonデータを読み込み  
    var script = document.createElement('script');
    script.src = 'leaf01.json';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
 
  window.feed_callback = function(results) {  //マップにマーカーを生成
    for (var i = 0; i < results.features.length; i++) {
      var featur = results.features[i];
      var latLng = new google.maps.LatLng(featur.lat,featur.lng);
      var marker = new google.maps.Marker({
        position: latLng,
        title:featur.id,
        map: Mymap
      });
      var mktxt = "<a href='" + featur.url + "'>" + featur.name + "</a>";  //吹き出しの中身の文言
      attachMessage(marker,mktxt );
    }
  }
 
  function attachMessage(marker, msg){  //マーカークリック時に、吹出しを表示
    google.maps.event.addListener(marker, 'click', function(event) {
      new google.maps.InfoWindow({
        content: msg
      }).open(marker.getMap(), marker);
    });
  }
</script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=【API キー】&callback=initMap">
</script></head>
  <body>
    <h3>JSONファイルを js化して読込む</h3>
    <div id="gmap"></div>
  </body>
</html>

(　7行目)　map の表示エリア(#gmap)を定義します
( 12行目)　Mymap を設定します
( 18-20行) jsonデータ(leaf01.json)を scriptとして読み込むように記述
( 23-35行) 読込データの関数(feed_callback())を実行しマーカーを生成
( 32-33行) 吹き出しの中身を記述
( 37-43行) マーカーをクリック時に、吹き出しを表示
( 45行目)　google maps API を呼び出す
( 49行目)　map 表示エリアを確保

【左記の例】　下図クリックで起動