JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Version 1：Google Maps 導航按鈕</title>
</head>

<body>
  <h2>中興大學校園導覽（含導航）</h2>
  <div id="list"></div>

  <script>
    var SHEET_URL = 
      "https://docs.google.com/spreadsheets/d/1c8csSLxxQwEruOCT1TxyxgBk5v72tTMErvUEYoSGf2s/pub?output=csv";

    function loadData() {
      fetch(SHEET_URL)
        .then(function(res) { return res.text(); })
        .then(function(text) {

          var rows = text.split("\n");
          var list = document.getElementById("list");

          for (var i = 1; i < rows.length; i++) {
            var cols = rows[i].split(",");
            var name = cols[1];
            var lat = cols[2];
            var lng = cols[3];

            if (!name) continue;

            var url = "https://maps.google.com.tw/maps?daddr=" + lat + "," + lng;

            list.innerHTML += 
              "<div style='margin-bottom:10px;'>" +
                "<strong>" + name + "</strong><br>" +
                "<a href='" + url + "' target='_blank'>導航到此地點</a>" +
              "</div>";
          }
        });
    }

    loadData();
  </script>
</body>
</html>