スプレッドシートからGoogleMapへの位置情報の渡し方

前提・実現したいこと

現在GASを利用し、スプレッドシートに記載されている経度、緯度の数値を読み取って変数へ代入、その変数からGoogleMapへ位置情報を渡して地図の中心に表示するアプリの作成をしています。

スプレッドシートの内容

地名	緯度	経度
横浜駅	35.465786	139.622313

発生している問題・エラーメッセージ

変数をGoogleMapへ渡す事に失敗しているらしく、地図が表示されない

該当のソースコード

今回は外部ファイル形式を利用しアプリを作成しています。

index.html(最初の部分がGAS内でHTMLファイルを作成した際のデフォルトのままになっています)

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テスト</title>
</head>
<body>
  <h1>Google Map</h1>
  
  <p>ここにGPSで取得した情報を表示します。</p>
  
  <div id="sample"  style="width:900px; height:500px;  margin: 10px auto;" ></div>　<!--マップを表示させるdiv-->
  
  <?!= HtmlService.createHtmlOutputFromFile('js2').getContent(); ?> 　<!-- 記述した箇所('js1')のHTMLファイルを読み込む -->
  
  <p>過去のGPS表記一覧</p>
</body>
</html>

コード.gs

function doGet(request) {
  var template = 'index';
  
  return HtmlService.createTemplateFromFile(template).evaluate();
}

js.html
問題のコード：このコードのfor文からLaatLng(lat,lng);へ値を渡すのに失敗していると考えています。

<script>
var map;
var point1 = [];
var infoWindow = [];

function initMap() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var lRow = sheet.getLastRow(); //最終行を取得する
  for( var i = 1; i <4; i++){
    var getVal = sheet.getRange(lRow,i).getValue(); //IRowには最終行を示す値を取得しており、列部分をfor文で回せば全ての最終行の値を取得する事が可能である
    if( i == 1){
       var ame = getVal;
    }else if( i == 2){
       var lat = getVal;
    }else if( i == 3){
       var lng = getVal;
    }
  } 
     var latlng = new google.maps.LatLng(lat,lng);//中心の緯度, 経度
     var map = new google.maps.Map(document.getElementById('sample'), {
          zoom: 14,//ズームの調整
          center: latlng//上で設定した中心
    });
     var marker = new google.maps.Marker({
          position: latlng,
          map: map
  　 });
}
   
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=(API)=initMap"></script>  <!-- 取得したAPIを利用する-->

試したこと

js.htmlを以下のコードに変更した際には地図が表示されているので大まかな流れに問題はないと思っています。

<script>
var map;
var point1 = [];
var infoWindow = [];

   function initMap() {
        var lat = 35.465786;
   　　 var lng =139.622313;
        var latlng = new google.maps.LatLng(lat,lng);//中心の緯度, 経度
        var map = new google.maps.Map(document.getElementById('sample'), {
          zoom: 14,//ズームの調整
          center: latlng//上で設定した中心
        });
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
      }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=(API)=initMap"></script>  <!-- 取得したAPIを利用する-->

値を取得する点に関しては以下のコードでログに数値が表示されているので問題ないと考えています

function final(){ //最終行を取得する関数final  
  var sheet = SpreadsheetApp.getActiveSheet();
  var lRow = sheet.getLastRow(); //最終行を取得する
  for( var i = 1; i <4; i++){
    var getVal = sheet.getRange(lRow,i).getValue(); //IRowには最終行を示す値を取得しており、列部分をfor文で回せば全ての最終行の値を取得する事が可能である
    if( i == 1){
     var ame = getVal;
    }else if( i == 2){
    var lat = getVal;
    }else if( i == 3){
    var lng = getVal;
    }
  } 
  Logger.log(lat);
  Logger.log(lng);
}

考えた問題点

1,ドキュメントなどを見るに、緯度経度の数値をコード内に直接指定する必要があり、やろうとしている事がそもそも仕様上出来ない。

2,スプレッドシートから渡された数値が、型などの問題からnew google.maps.LatLng(lat,lng);で読み込まれてない。

3,スコープとか別部分で問題を起こしている。

個人的には1,2どちらかが主要な原因だと考えています。

補足情報

インデントなのですが、全体を選択後tabキーで整えられると書いてあったので実行した所、何故か全てのコードが左寄せになってしまい、見難いにも程があるので一部手動で直しています。見難いコードで申し訳ありません。

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

回答2件

###回答
こんにちは。
解決しましたでしょうか？

実際にデバッグしてみましたが、
少し気になる所がありますので、ご確認ください。

initMap()内に記述している下記のようなGASのコードは動作していますでしょうか？
・var sheet = SpreadsheetApp.getActiveSheet();
・var lRow = sheet.getLastRow(); //最終行を取得する

initMapはjavascriptだと思うので、GASのコードは使えない気がします。

一度、script内でinitMap関数をコールして、取得できているか確認した方がいいと思います。

javascriptからスプレッドシートにアクセスする方法が必要だと思います。

以上です。

投稿2019/12/09 03:21

KazuSaka

総合スコア640

退会済みユーザー

2019/12/09 05:47

ご回答ありがとうございます。今回初めてGASを利用しているので仕様を理解しきれていない面が多く、回答して下さった二人の回答からようやく問題点を理解する事ができました。本当にありがとうございます。

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

ベストアンサー

スプレッドシートから値を取得するためのスクリプトはGoogle Apps Scriptとして作成、実行する必要があります。ご質問にあるスクリプトではこの部分を修正することで動作すると思われます。そこで、下記の2つのパターンを提案させていただきます。どちらもスプレッドシートから値を取得するためのスクリプトはGoogle Apps Scriptとして実行されます。両パターンの結果は同じです。

サンプルスクリプトについて

スクリプトを使用する際は、Google Apps Script sideのスクリプトをコード.gsへコピーペーストし、HTML and Javascript sideのスクリプトをindex.htmlへコピーペーストした後、Web Appsを新しいバージョンとして再デプロイしてからアクセスしてください。これにより最新のスクリプトがWeb Appsへ反映されます。
アクティブスプレッドシートの最初のシートで列A, B, Cがそれぞれ地名, 緯度, 経度であると想定しています。理由は、doGetを使ってWeb Appsとしてアクセスする場合、SpreadsheetApp.getActiveSheet()は、アクティブスプレッドシートの最初のシートが返されるためです。もしも他のシートからデータを取得したい場合は、SpreadsheetApp.getActiveSpreadsheet().getSheetByName(name)などを使用してください。
https://maps.googleapis.com/maps/api/js?key=###&callback=initMapの###へAPI keyをセットしてください。

パターン 1

このパターンではScriptletsを使ってスプレッドシートから値を取得しています。

Google Apps Script side: `コード.gs`

javascript
1function doGet() {
2  return HtmlService.createTemplateFromFile('index').evaluate();
3}
4
5function getData() {
6  var sheet = SpreadsheetApp.getActiveSheet();
7  return sheet.getRange(sheet.getLastRow(), 1, 1, 3).getValues()[0];
8}

HTML and Javascript side: `index.html`

javascript
1<div id="sample" style="width:900px; height:500px; margin: 10px auto;" ></div>
2<script>
3function initMap() {
4  <? var data = getData(); ?>
5  const [ame, lat, lng] = (<?= data ?>).split(",").map(e => isNaN(e) ? e : e * 1);
6  var latlng = new google.maps.LatLng(lat, lng);
7  var map = new google.maps.Map(document.getElementById('sample'), {zoom: 14, center: latlng});
8  var marker = new google.maps.Marker({position: latlng, map: map});
9}
10</script>
11<script src="https://maps.googleapis.com/maps/api/js?key=###&callback=initMap"></script>

パターン 2

このパターンではgoogle.script.runを使ってスプレッドシートから値を取得しています。

Google Apps Script side: `コード.gs`

javascript
1function doGet() {
2  return return HtmlService.createHtmlOutputFromFile('index');
3}
4
5function getData() {
6  var sheet = SpreadsheetApp.getActiveSheet();
7  return sheet.getRange(sheet.getLastRow(), 1, 1, 3).getValues()[0];
8}

HTML and Javascript side: `index.html`

javascript
1<div id="sample" style="width:900px; height:500px; margin: 10px auto;" ></div>
2<script>
3function initMap() {
4  google.script.run.withSuccessHandler(e => {
5    const [ame, lat, lng] = e;
6    var latlng = new google.maps.LatLng(lat, lng);
7    var map = new google.maps.Map(document.getElementById('sample'), {zoom: 14, center: latlng});
8    var marker = new google.maps.Marker({position: latlng, map: map});
9  }).getData();
10}
11</script>
12<script src="https://maps.googleapis.com/maps/api/js?key=###&callback=initMap"></script>

参考

投稿2019/12/09 02:15

kisojin

総合スコア899

退会済みユーザー

2019/12/09 05:43

わざわざ２パターンもコードを考えてくださってありがとうございます。今回はパターン2の方を使わせてもらい、想定していた挙動を再現する事ができました。本当にありがとうございます。それと一つだけ質問があるのですが、パターン1の(<?= data ?>).split(",").map(e => isNaN(e) ? e : e * 1);ではどのような挙動をして定数に値を渡しているのでしょうか？

kisojin

2019/12/10 02:05

ご返事ありがとうございます。(<?= data ?>).split(",").map(e => isNaN(e) ? e : e * 1) は、dataは内部では配列ですが、テンプレートとして使用すると文字列になってしまいますので、これを split(",").map(e => isNaN(e) ? e : e * 1) を使って配列にしています。このとき、特に無くとも問題ないかもしれませんが、数値は数値として変換させています。

退会済みユーザー

2019/12/13 04:23

返信遅れてすみません。理解できました。ありがとうございます

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

スプレッドシートからGoogleMapへの位置情報の渡し方

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

考えた問題点

補足情報

サンプルスクリプトについて

パターン 1

Google Apps Script side: `コード.gs`

HTML and Javascript side: `index.html`

パターン 2

Google Apps Script side: `コード.gs`

HTML and Javascript side: `index.html`

参考

関連した質問

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

考えた問題点

補足情報

サンプルスクリプトについて

パターン 1

Google Apps Script side: コード.gs

HTML and Javascript side: index.html

パターン 2

Google Apps Script side: コード.gs

HTML and Javascript side: index.html

参考

関連した質問

Google Apps Script side: `コード.gs`

HTML and Javascript side: `index.html`

Google Apps Script side: `コード.gs`

HTML and Javascript side: `index.html`