質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

2回答

1895閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2019/12/08 15:36

編集2019/12/08 15:37

前提・実現したいこと

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

スプレッドシートの内容

地名緯度経度
横浜駅35.465786139.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キーで整えられると書いてあったので実行した所、何故か全てのコードが左寄せになってしまい、見難いにも程があるので一部手動で直しています。見難いコードで申し訳ありません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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を利用しているので仕様を理解しきれていない面が多く、回答して下さった二人の回答からようやく問題点を理解する事ができました。 本当にありがとうございます。
guest

0

ベストアンサー

スプレッドシートから値を取得するためのスクリプトは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パターンもコードを考えてくださってありがとうございます。 今回はパターン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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問