neno-tech/code.gs

## code.gs

function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate()
}

function userClick(data) {
  let ss = SpreadsheetApp.openById('xxx');
  let sheet = ss.getSheets()[0];
  let response = Maps.newGeocoder().reverseGeocode(data.lat, data.lon);
  let geoAddress = response.results[0].formatted_address;
  sheet.appendRow([data.username, data.nickname, Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss"), `${data.lat},${data.lon}`, geoAddress])
  return true
}

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <div class="container">
        <h2>บันทึกข้อมูลพิกัดนักเรียน</h2>
        <form id="mainform">
            <div class="form-group">
                <label for="username">ชื่อ สกุล:</label>
                <input type="text" class="form-control" id="username">
            </div>
            <div class="form-group">
                <label for="nickname">ชื่อเล่น:</label>
                <input type="text" class="form-control" id="nickname">
            </div><br>

            <button id="btn" class="btn btn-primary">บันทึกข้อมูล</button>
        </form>
    </div>
    <script>
        getLocation()
        let lat, lon
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    lat = position.coords.latitude
                    lon = position.coords.longitude
                });
            }
        }

    </script>
    <script>
        document.getElementById("btn").addEventListener("click", saveData)

        function saveData() {
            event.preventDefault()
            var data = {}
            data.username = document.getElementById("username").value
            data.nickname = document.getElementById("nickname").value
            data.lat = lat
            data.lon = lon
            google.script.run.withSuccessHandler(saveSuccess).userClick(data)
            document.getElementById("mainform").reset()
        }
        function saveSuccess(result) {
            if (result) {
                sweetAlert({
                    text: "บันทึกข้อมูลเรียบร้อยแล้ว",
                    icon: "success",
                    timer: 5000
                })
            }
        }
    </script>
</body>

</html>

	function doGet(e) {
	return HtmlService.createTemplateFromFile("index").evaluate()
	}

	function userClick(data) {
	let ss = SpreadsheetApp.openById('xxx');
	let sheet = ss.getSheets()[0];
	let response = Maps.newGeocoder().reverseGeocode(data.lat, data.lon);
	let geoAddress = response.results[0].formatted_address;
	sheet.appendRow([data.username, data.nickname, Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss"), `${data.lat},${data.lon}`, geoAddress])
	return true
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	</head>

	<body>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
	<div class="container">
	<h2>บันทึกข้อมูลพิกัดนักเรียน</h2>
	<form id="mainform">
	<div class="form-group">
	<label for="username">ชื่อ สกุล:</label>
	<input type="text" class="form-control" id="username">
	</div>
	<div class="form-group">
	<label for="nickname">ชื่อเล่น:</label>
	<input type="text" class="form-control" id="nickname">
	</div><br>

	<button id="btn" class="btn btn-primary">บันทึกข้อมูล</button>
	</form>
	</div>
	<script>
	getLocation()
	let lat, lon
	function getLocation() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(position => {
	lat = position.coords.latitude
	lon = position.coords.longitude
	});
	}
	}

	</script>
	<script>
	document.getElementById("btn").addEventListener("click", saveData)

	function saveData() {
	event.preventDefault()
	var data = {}
	data.username = document.getElementById("username").value
	data.nickname = document.getElementById("nickname").value
	data.lat = lat
	data.lon = lon
	google.script.run.withSuccessHandler(saveSuccess).userClick(data)
	document.getElementById("mainform").reset()
	}
	function saveSuccess(result) {
	if (result) {
	sweetAlert({
	text: "บันทึกข้อมูลเรียบร้อยแล้ว",
	icon: "success",
	timer: 5000
	})
	}
	}
	</script>
	</body>

	</html>