スプレッドシート
中身が見たい方はコピー作成、ツールースプレッドシートを確認ください
地図
コード
// URLからスプレッドシートIDを指定 const spreadSheetId = "1o3Td_KTKDe6AELaBno88sMLXfrkGEOdhmZqGM87NiUA"; let data; function doGet() { // シート指定 let sheet = SpreadsheetApp.openById(spreadSheetId).getSheetByName("data"); // 最終行取得 let row = sheet.getLastRow(); // 範囲指定 let range = sheet.getRange(2, 1, row, 14); // セルデータを取得 data = range.getValues(); // console.log(data); // index.htmlをベースにHTMLを作成 let output = HtmlService.createTemplateFromFile("index"); return output.evaluate(); } function getCSV() { let result = []; // CSV ヘッダー部分 result.push("title,lat,lng,color"); for (let i = 0; i < data.length; i++) { // 色指定 標準(緑色) let color = "green"; // 開局以外は黄色 if (data[i][5] != "開局") color = "yellow"; // CSV データ部分 let temp = [data[i][1], data[i][12], data[i][13], color]; // 場所が空白以外のデータをカンマで結合 if (data[i][1]) result.push(temp.join(",")); } // すべての登録データを改行で結合 return result.join("\n"); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>楽天モバイル基地局マップ(愛媛県)</title> <style> body { margin: 0; text-align: center; } </style> </head> <body> <script type="module" src="https://code4fukui.github.io/csv-map/csv-map.js"></script> <csv-map height="90vh"> <?= getCSV() ?> </csv-map> <footer> <p> <a href="https://github.com/code4fukui/csv-map">csv-map</a> <a href="https://github.com/code4sabae/js/blob/master/LICENSE">ライセンス MIT Code for Sabae / Taisuke Fukuno</a> <a href="https://c4.sabae.cc/">Code for Sabae</a> </p> </footer> </body> </html>
デプロイ
右上の「デプロイ」から初回のみ「新しいデプロイ」
歯車から「ウェブアプリ」
アクセスできるユーザーを「全員」でデプロイ
でURLが表示されるのでURLで地図を確認
コードを書き換えるたびに「デプロイ」を管理
右上の鉛筆マークをクリック
バージョンの「新バージョン」でデプロイ