GASで地図表示

スプレッドシート

docs.google.com

中身が見たい方はコピー作成、ツールースプレッドシートを確認ください

地図

https://script.google.com/macros/s/AKfycbxnpbB_FFRblxRokTPKpRls2v6xLyiXSKl-f_QhV8bGyMqd4rnk5JdtHdl5P5HGoDaJFw/exec

コード

// 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>

デプロイ

f:id:imabari_ehime:20210712110752p:plain

右上の「デプロイ」から初回のみ「新しいデプロイ」

歯車から「ウェブアプリ」

アクセスできるユーザーを「全員」でデプロイ

でURLが表示されるのでURLで地図を確認

f:id:imabari_ehime:20210712104836p:plain

コードを書き換えるたびに「デプロイ」を管理

右上の鉛筆マークをクリック

バージョンの「新バージョン」でデプロイ