GASでhtmlファイルに書いた<script>の内容が出力されない

現状

以下のコードを実行すると画像のようになってしまい、現在地の緯度と経度が表示されません。

やったこと

こちらの記事を参考に<body>と<script>の間に<?!= HtmlService.createHtmlOutputFromFile('index').getContent(); ?>を追記しましたがダメでした。Geolocation APIはGASでは使えないということなのでしょうか？gsファイルでhtmlファイルのインポートに失敗しているのか、geoFindUser()の書き方が違うのか判断しかねました。どなたか知見のある方、ぜひご教授よろしくお願いします。

コード.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
function geoFindUser() {
     //getCurrentPositionメソッドで現在地を取得
        navigator.geolocation.getCurrentPosition(
            //現在地の取得に成功した場合の処理
            function(position) {
              //データを変数にして整理（position.coords.latitude/longitudeが座標）
              var lat = position.coords.latitude;
              var lng = position.coords.longitude;
              console.log(lat,lng);
            }  
        )
       }
    </script>
  </body>
</html>

3_April_2021

2021/08/27 08:52

そこに表示したいならgsの方に書いてくださいとだけ。親切な方がいれば詳しく回答してくれるでしょう。

行動規範の内容に同意します

回答1件

まず、doGetという関数を実行しても何も起きません。
doGetは、Webページを表示するためのものです。
デプロイという作業が必要になります。
Google Apps Scriptのエディタ画面の上にデプロイという青いボタンがありますので、クリックして新しいデプロイを選択して種類の選択からウェブアプリを選択して作成してください。
作成するとURLが表示されますのでURLをクリックすれば、index.htmlの内容が表示されるようになります。
index.htmlを以下のコードにすれば、情報がwebページに表示されると思います。
**console.log(lat,lng);**は、ブラウザの開発者ツールのコンソールタブから確認ができると思います。

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <base target="_top" />
5    </head>
6    <body>
7        <script>
8            function geoFindUser() {
9                //getCurrentPositionメソッドで現在地を取得
10                navigator.geolocation.getCurrentPosition(
11                    //現在地の取得に成功した場合の処理
12                    function (position) {
13                        //データを変数にして整理（position.coords.latitude/longitudeが座標）
14                        var lat = position.coords.latitude;
15                        var lng = position.coords.longitude;
16                        console.log(lat, lng);
17                        document.body.innerHTML += `
18                            <p>${lat}</p>
19                            <p>${lng}</p>
20                        `;
21                    }
22                );
23            }
24            geoFindUser();
25        </script>
26    </body>
27</html>