質問編集履歴

今回の問題点の追記

2019/03/29 15:32

投稿

jzx100ts

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -212,11 +212,9 @@
       }
-  var locations = markerData;
-```
+```
-などとしてmarkerDataを生成し、locationsに読み込んで使用したいのですが、上記のコードを<script>の中に記載すると、ページを開いても何も表示されないという状況です。それを削除してべた打ちの４件を入力するときちんとマップが表示されます。
+などとしてスプレッドシートに入力されているデータをlocationsに読み込んで使用したいのですが、上記のコードを<script>の中に記載すると、ページを開いても何も表示されないという状況です。それを削除してべた打ちの４件を入力するときちんとマップが表示されます。
 HTMLファイルにいきなりこれを記載しても「SpreadsheetAppが定義されていない」ということで動かないのかと推測し、上記のものをコード.gsに関数の形で記載してみました。それでページを開くと、「その操作を実行するには承認が必要です。」となり、やはり地図は表示されません。
@@ -304,6 +302,32 @@
+今回の問題点は、
+クライアント側JS[HTMLファイルに記述したJSスクリプトinitMap()の内部]から
+サーバー側関数[コード.gsに記載したGASスクリプト]を直接呼び出そうとしていたことでした。
+それをするにはgoogle.script.runなどが用意されているようですが、
+今回はhiroshi0240様がもっと簡単な「置換法」を教えてくださったので、すぐに解決しましたし、おかげで応用もすることができました。
+正しい表現かどうかわかりませんが、
+HTMLファイルを生成する前の段階で、サーバー側（GAS）の処理でマーカーデータをスプレッドシートから読み込み、
+生成前のHTMLにマーカーデータを潜り込ませ（←ここが置換処理）、
+そのデータに基づいてHTMLファイルを生成することで、
+HTMLファイルのJS内部からサーバー側の処理を呼び出す必要はなくなった。というイメージです。
+ゆくゆくはgoogle.script.runなども使いこなせるようになりたいと思います。
 ```GAS
 function doGet(e)

解決コードの追記

2019/03/29 15:32

投稿

jzx100ts

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -228,10 +228,12 @@
+```GAS
 コード.gs
-```
 function GETMARKERLIST(){
   var MarkerListSS = SpreadsheetApp.openById("SSID");
@@ -258,11 +260,15 @@
   }
-```
+```
-map.html
+```html
-```
 var locations =　GETMARKERLIST();
@@ -279,3 +285,275 @@
 コード.gsとHTMLファイルでコードを書き分ける意義などはわかっておらず、それが原因して行き詰まっているのかもと思っております。
 私が大変初歩的な部分の理解ができていないのかもしれないと推察していますが、何卒ご教授いただけたら助かります。どうぞよろしくお願いいたします。
+★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
+おかげさまで解決しましたので、解決済みのコードを記載致します。
+マーカーリストを２つのスプレッドシートから読み込み、
+それぞれのマーカーをスプレッドシートごとに色分けする内容となっております。
+```GAS
+function doGet(e)
+{
+  var page=e.parameter["p"];
+  var p_map = 'map';//ファイル名
+if (page == p_map) {//オートリロードGoogleMap
+    var markerdata = JSON.stringify(GETMARKERLIST());//GETMARKERLIST()の戻り値は配列オブジェクトなのでJSON 文字列に変換する
+    var markerdata2 = JSON.stringify(GETMARKERLIST2());//GETMARKERLIST()の戻り値は配列オブジェクトなのでJSON 文字列に変換する
+    var html =  HtmlService.createHtmlOutputFromFile("map");
+    var content = html.getContent().replace(/%markerdata%/,  markerdata );//ここで置換を実施する
+    var content2 = content.replace(/%markerdata2%/,  markerdata2 );//ここで置換を実施する
+    return HtmlService.createHtmlOutput(content2)
+        .setTitle('地図')
+        .setFaviconUrl('fav.png')
+        .addMetaTag('viewport', "width=device-width, initial-scale=1, user-scalable=yes");
+    }
+}
+function GETMARKERLIST(){//グループ１のマーカー情報 スプレッドシートのＡ列にタイトル、Ｂ列に緯度、Ｃ列に経度を入力しておく
+  var MarkerListDATA = getData("****SSID****","MarkerList");
+  var markerData=[];
+  for (var i = 0 ; i < MarkerListDATA.length ; i++ ){
+      var temp_marker = [MarkerListDATA[i][0],MarkerListDATA[i][1],MarkerListDATA[i][2]];
+      markerData.push(temp_marker);
+  }
+  return markerData;
+}
+function GETMARKERLIST2(){//グループ２のマーカー情報 スプレッドシートのＡ列にタイトル、Ｂ列に緯度、Ｃ列に経度を入力しておく
+  var MarkerListDATA = getData("****SSID****","MarkerList2");
+  var markerData=[];
+  for (var i = 0 ; i < MarkerListDATA.length ; i++ ){
+      var temp_marker = [MarkerListDATA[i][0],MarkerListDATA[i][1],MarkerListDATA[i][2]];
+      markerData.push(temp_marker);
+  }
+  return markerData;
+}
+function getData(ssId,sheetName) {
+  // スプレッドシートの取得
+  var ss = SpreadsheetApp.openById(ssId);
+  // データの取得
+  var values = ss.getSheetByName(sheetName).getDataRange().getValues();
+  return values;
+}
+```
+```HTML
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_top">
+    <style type="text/css">
+    #ARmap{ height: 620px;
+          width: 100%;
+          margin:0 auto;}
+    </style>
+  </head>
+  <body>
+<script type="text/javascript">
+function initMap() {
+    var locations = %markerdata%;//ここがスプレッドシートの情報に置換される
+    var locations2 = %markerdata2%;//ここがスプレッドシートの情報に置換される
+    var map = new google.maps.Map(document.getElementById('ARmap'), {
+         zoom: 16,
+         center: new google.maps.LatLng(35.678244, 139.736343),
+         mapTypeId: google.maps.MapTypeId.ROADMAP
+    });
+    var infowindow = new google.maps.InfoWindow;
+    var marker, i;
+    //マーカーの読み込み(グループ１)
+    for (i = 0; i < locations.length; i++) {
+        marker = new google.maps.Marker({
+             position: new google.maps.LatLng(locations[i][1], locations[i][2]),
+             icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|00bfff|',//グループ２のマーカーの色指定
+             map: map
+        });
+        google.maps.event.addListener(marker, 'click', (function(marker, i) {
+             return function() {
+                 infowindow.setContent(locations[i][0]);
+                 infowindow.setContent(locations[i][0]);
+                 infowindow.open(map, marker);
+             }
+        })(marker, i));
+    }
+    //マーカーの読み込み(グループ２)
+    for (i = 0; i < locations2.length; i++) {
+        marker = new google.maps.Marker({
+             position: new google.maps.LatLng(locations2[i][1], locations2[i][2]),
+             icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|aaaaaa|',//グループ１のマーカーの色指定
+             map: map
+        });
+        google.maps.event.addListener(marker, 'click', (function(marker, i) {
+             return function() {
+                 infowindow.setContent(locations2[i][0]);
+                 infowindow.setContent(locations2[i][0]);
+                 infowindow.open(map, marker);
+                 }
+             })(marker, i));
+    }
+}
+</script>
+<script async defer
+        src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx&callback=initMap">//keyは自分のものを入力する
+</script>
+<div class="waku">
+<h1>地図</h1>
+    <div id="ARmap"></div>
+</div>
+</body>
+</html>
+```

下書きのまま投稿してしまったので修正

2019/03/29 15:13

投稿

jzx100ts

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,12 +1,8 @@
 ### 前提・実現したいこと
-現在、GASによるウェブアプリケーション上で、
-GoogleMapを使って複数のマーカーを設置し、吹き出しも動くようになりました。
+現在、GASによるウェブアプリケーション上で、GoogleMapを使って複数のマーカーを設置し、吹き出しも動くようになりました。
-複数のマーカーデータはスクリプト内に直接記述されているのですが、
-表示したいマーカーデータは日々変わるので、スプレッドシートから情報を読み込むようにしたいと思っております。
+複数のマーカーデータはスクリプト内に直接記述されているのですが、設置したい複数のマーカーデータは日々位置と情報を変えたいので、スプレッドシートに保存してある情報からマーカーデータを読み込むようにしたいと思っております。
@@ -168,9 +164,31 @@
 ### 発生している問題・エラーメッセージ
+```
+[
+  ['しぶや<br><a href="http://www.yahoo.co.jp">やふー</a>', 35.658319, 139.700922],
+  ['はらじゅく<br><a href="http://www.google.co.jp">ぐーぐる</a>', 35.669276, 139.702762],
+  ['おもてさんどう<br><a href="http://www.apple.co.jp">あぽ</a>', 35.665435, 139.711565],
+  ['えびす<br><a href="http://www.amazon.co.jp">あま</a>', 35.647915, 139.709687 ]
+]
+```
+上記の部分をスプレッドシートに保存されたデータから読み込みたいのですが実現できません。
+### 試したこと
-不勉強でお恥ずかしいのですが、スプレッドシートから情報を読み込むために、
+不勉強でお恥ずかしいのですが、とあるスプレッドシートに保存されているマーカーデータを随時var locationsに読み込むために、
 ```
@@ -182,6 +200,48 @@
+  var locations = [];
+  for (var i = 0 ; i < MarkerListDATA.length ; i++ )
+      {
+      temp_marker = [MarkerListDATA[i][0],MarkerListDATA[i][1],MarkerListDATA[i][2]];
+      locations.push(temp_marker);
+      }
+  var locations = markerData;
+```
+などとしてmarkerDataを生成し、locationsに読み込んで使用したいのですが、上記のコードを<script>の中に記載すると、ページを開いても何も表示されないという状況です。それを削除してべた打ちの４件を入力するときちんとマップが表示されます。
+HTMLファイルにいきなりこれを記載しても「SpreadsheetAppが定義されていない」ということで動かないのかと推測し、上記のものをコード.gsに関数の形で記載してみました。それでページを開くと、「その操作を実行するには承認が必要です。」となり、やはり地図は表示されません。
+HTMLファイルに直接記述した最初のトライのときには「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。不正行為を報告 - 利用規約」が表示され、地図だけが出ない状態でしたが、
+コード.gsに関数を作って試した２回目のトライでは、GASのロゴと「その操作を実行するには承認が必要です。」だけが表示されました。
+以下が２回目のトライで試したコードになります。
+コード.gs
+```
+function GETMARKERLIST(){
+  var MarkerListSS = SpreadsheetApp.openById("SSID");
+  var MarkerListSH = MarkerListSS.getSheetByName("SheetName");
+  var MarkerListDATA = MarkerListSH.getDataRange().getValues();
   var markerData=[];
   for (var i = 0 ; i < MarkerListDATA.length ; i++ )
@@ -194,48 +254,6 @@
       }
-```
-などとしてmarkerDataを作成し、それを読み込みリストに使用したいのですが、
-上記のコードを<script>の中に記載すると、ページを開いても何も表示されないという状況です。
-それを削除するとマップが表示されます。
-HTMLファイルにいきなり記載しても「SpreadsheetAppが定義されていない」ということで動かないのかと推測し、
-上記のものをコード.gsに関数の形で記載してみました。
-以下が最後に試したコードになります。
-コード.gs
-```
-function GETMARKERLIST(){
-  var MarkerListSS = SpreadsheetApp.openById("SSID");
-  var MarkerListSH = MarkerListSS.getSheetByName("SheetName");
-  var MarkerListDATA = MarkerListSH.getDataRange().getValues();
-  var markerData=[];
-  for (var i = 0 ; i < MarkerListDATA.length ; i++ )
-      {
-      temp_marker = [MarkerListDATA[i][0],MarkerListDATA[i][1],MarkerListDATA[i][2]];
-      markerData.push(temp_marker);
-      }
   return markerData
   }
@@ -246,166 +264,18 @@
 ```
-GETMARKERLIST()
+var locations =　GETMARKERLIST();
-```
+```
-### 該当のソースコード
-var map;
-var marker = [];
-var infoWindow = [];
-var markerData = [ // マーカーを立てる場所名・緯度・経度
-  {
-       name: 'TAM 東京',
-       lat: 35.6954806,
-        lng: 139.76325010000005,
-        icon: 'tam.png' // TAM 東京のマーカーだけイメージを変更する
- }, {
-        name: '小川町駅',
-     lat: 35.6951212,
-        lng: 139.76610649999998
- }, {
-        name: '淡路町駅',
-     lat: 35.69496,
-      lng: 139.76746000000003
- }, {
-        name: '御茶ノ水駅',
-        lat: 35.6993529,
-        lng: 139.76526949999993
- }, {
-        name: '神保町駅',
-     lat: 35.695932,
-     lng: 139.75762699999996
- }, {
-        name: '新御茶ノ水駅',
-       lat: 35.696932,
-     lng: 139.76543200000003
- }
-];
-function initMap() {
- // 地図の作成
-    var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成
+ネットで情報を探しても、マーカーや吹き出しについての情報は見つかるのですが、Googleスプレッドシートに保存されている文字データやlatlangを読み込んで、マーカー設置のリストに使用している実例が見つからず、こちらで質問させていただきました。
-   map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
-     center: mapLatLng, // 地図の中心を指定
-      zoom: 15 // 地図のズームを指定
-   });
- // マーカー毎の処理
- for (var i = 0; i < markerData.length; i++) {
-        markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
-        marker[i] = new google.maps.Marker({ // マーカーの追加
-         position: markerLatLng, // マーカーを立てる位置を指定
-            map: map // マーカーを立てる地図を指定
-       });
-     infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
+感覚としてはそれほど難しいことでは無いのではないかと感じるものの、これまで独学でスプレッドシート周りのことを中心にGASを扱ってきましたので、
-         content: '<div class="sample">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容
-       });
-     markerEvent(i); // マーカーにクリックイベントを追加
- }
-   marker[0].setOptions({// TAM 東京のマーカーのオプション設定
-        icon: {
-         url: markerData[0]['icon']// マーカーの画像を変更
-       }
-   });
-}
-// マーカーにクリックイベントを追加
-function markerEvent(i) {
-    marker[i].addListener('click', function() { // マーカーをクリックしたとき
-      infoWindow[i].open(map, marker[i]); // 吹き出しの表示
-  });
-}
-### 試したこと
-ここに問題に対して試したことを記載してください。
+HTMLが絡んできたとたん、理解が追いついておりません。
-### 補足情報（FW/ツールのバージョンなど）
+コード.gsとHTMLファイルでコードを書き分ける意義などはわかっておらず、それが原因して行き詰まっているのかもと思っております。
-ここにより詳細な情報を記載してください。
+私が大変初歩的な部分の理解ができていないのかもしれないと推察していますが、何卒ご教授いただけたら助かります。どうぞよろしくお願いいたします。

誤字

2019/03/26 18:01

投稿

jzx100ts

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,7 +10,7 @@
-現在は下記の状態で、var locationsに。
+現在は下記の状態で、var locationsに入れた４件のマーカーデータに基づき、マーカーが設置できています。