見出し画像

Googleフォームからgoogleマップへの自動プロット

Dr. Hoshiken

Googleフォームから入力した情報をレイヤー（色付けやカテゴリ分け）を分けてGoogleマップにピンを落とせないかを検討しました。

・後援会のマッピングを行いたいが入力者はパソコンに詳しくない。
・フォームで名簿情報入力、マッピングまで行える名簿を作成したい。

という要望をもとに実装した内容となりますが、色々なことに応用・活用出来ると思います。

ご自身で実装するのも手間という方は有償でお手伝いさせていただきます（＾＾

それでは実装を始めてまいります！

実装のポイントはつまるところ、Google spreadsheet上のデータを更新したら瞬時にGoogleマップのピンも更新させることとなります。

先達の様々な実装を参考にさせていただきます。

https://qiita.com/champierre/items/e7758b69b39476148492

こちらにGoogleスプレッドシートを利用したデータを更新できるマップツールが紹介されております。

htmlとjsファイルだけで動く仕様とされてらっしゃるので、そちらは用意しつつ、実際にはGoogleマップだけでも出来るのかを確認してみたいと思います。

画像2

https://github.com/champierre/sheet2gmap
GitHubさんに公開されてるCodeをZipで落としてきてアップいたします。

画像3

画像1

設定をしておりませんので当然ですが読み込めません（＾＾

Google Cloud PlatformでAPIキーを用意しまして、

画像6


Google Sheets APIとMaps JavaScript APIの二つを有効化しました。

画像5


APIキーを作成しまして、キーを制限から呼び出すことのできる有効なAPIを指定します。

画像6

constants.js

画像7

index.html
それぞれにキーを入れてみると・・・

画像9


mapは表示できました！

しかし、まだ、ピンされておりません

spreadsheetの方もカラムを合わせたり経度と緯度を載せないとだめです（そもそもそういうコードですので当たり前とも）。

画像9

For development purpose onlyが表示されます。GCPに対しましてクレジットカードを登録します。こちらは$200の無料枠がありますので、その制限を超えないように上限設定を行っておきます。上限設定の方法については検索いただくと色々と出てまいりますのでそちらをご参考お願い致します。

ピンがプロットされない状態ですので、htmlソースを見てみますと

   var request = new XMLHttpRequest();
   request.open('GET', `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/sheet1?key=${API_KEY}`, true);
   request.responseType = 'json';

 単純にSHEET_IDの設定のみだけでは「sheet1」となっておりましたので、ここを「フォームの回答 1」に変更しました（合わせることが出来ればここは好きなタブ名に出来ます）。

画像10

ピンが立ちました！

さて、実際に緯度と経度を載せてみようとするとここで一つ問題発生が発生しました。

http://geocode.csis.u-tokyo.ac.jp/cgi-bin/simple_geocode.cgi

こちらのコードの場合、番地がカットされてしまうためピンが集まってしまうという問題です。

画像11


convertの際に町名＋番地までで号が抜けてしまうということですね。

と言うわけで、GAS（Google Apps Script）の出番となりそうです。

クラス名はClass Geocodeです。

先達の複数の施設名から住所と経度井戸を一括取得してGoogleスプレッドシートに反映するやり方を踏襲します。

http://www.nowhere.co.jp/blog/archives/20200410-232032.html/embed#?secret=gFIsA304RD

https://qiita.com/yoshi_yast/items/9e58e515d67d2251f802

緯度と経度を号までにしていこうと思います。

画像12


spreadsheetにGASを書いていきます

画像13


spreadsheetにGASを書いていきます

画像14


シート名と経度と緯度の場所（セル数）を合わせて実行！

画像15

よし、ちゃんと号まで行けました！！

画像16


フォーム送信時にトリガーを設定しました。一段回目の実装完了です。

次にプロットの表示変更に挑戦します。

ソースに加えるべきは var icon; とピンの色を変えた画像追加。そして列名と列に何が入っているとどのiconを表示するのかを決定するフォーム部分の修正。そして、吹き出しにどの情報を載せるかの精査。

うーん意外と厄介でした。

〇　ピンの色を変えた画像追加について

ピンの色を変えたり画像を変えたりと、これも色々な先達が多くいらっしゃって勉強になりました。画像を変えずに

https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|0099ff|

このようにRGBで指定して色だけ変えられるように設定するのが一番しっくりくるということで挑戦します。

https://hatenablog-parts.com/embed?url=https%3A%2F%2Fhryktrd.hatenablog.com%2Fentry%2F2019%2F03%2F26%2F230300#?secret=Pws8ILT48G

こちらを参照していきます。

〇　iconをソースに追加

色々なソースコードを参照していたら意味が分からなくなってコードをいじること4時間・・・（4時間も掛けるなと言う・・・はまるとはまりますので別のことをしたりストレッチをしたり・・・）

// マーカーのセット
if (data[‘rank’] === ‘1’){
var image = ‘http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|0000FF|’;
} else {
var image = ‘http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|00FFFF|’;
}
   marker[i] = new google.maps.Marker({
     position: markerLatLng,    // マーカーを立てる位置を指定
 icon: image,
     map: map            // マーカーを立てる地図を指定
   });
実際にはelse ifを使って分岐を増やして8種以上対応可能にしました。

色の配色は

https://ironodata.info/rgb.php?color=F6AD3C

さんを参考にさせていただきました！

〇　列名とパラメータの設定

列名はrankとして1～8段階で必要に応じて増やせるようにしていこうと思います。

〇　フォーム部分の修正

rank列に最初に設定していた項目からif関数で引き込もうと思います。他の列からもrank列に引っ張ってくることで色分けすることがこれで出来ると思います！

画像17


たかだか8段階程度ですのでIF文をひたすら貼り付けます。あ、実際にはちゃんと「,””」の空白処理も忘れずに施します。

〇　吹き出し情報の選択とソースへの追加

// マーカー位置セット
var latitude = markerData[i][‘緯度’];
if (!latitude) { continue; }
addMarker(i, markerData[i]);
var name = markerData[i][‘氏名’];
var addr = markerData[i][‘住所’];
// サイドバー
sidebar_html += <b>${i + 1}</b> <a href="javascript:openWindow(${i})">${name}<\/a> ： <a href="javascript:openWindow(${i})">${addr}<\/a><br />;
}

不必要な情報は画面表示領域を取ってしまいマイナスとなってしまいますので必要に応じた情報表示へと調整を行います。

このような感じで、一通り完成です！

最後に、フォームの体裁を整える（スプレッドシートからプルダウンに読み込み等）を行います。

spreadsheetでプルダウンメニューを用意してフォームに読み込ませます。

画像18


ちなみに、3パターンほどスプレッドシートからGASでやろうとしたら失敗しまして、Googleフォームの方でGASを動かしたらうまく拾えました。←無駄に数時間ここでも持っていかれました・・・orz

あとはrankでソートするトリガーを埋め込むなど、運用しながら更新を掛けるなど応用は色々と効きます！

以上です。長文乱文失礼いたしました。

ご覧いただいた方にとって有益な情報になりましたら幸甚です！

こちらの記事が少しでもお役に立ったという方は是非youtubeのチャンネル登録をしていただけると嬉しいです！

https://www.youtube.com/channel/UCQM_aeJhah2UXasmofA1ZnQ?sub_confirmation=1

よろしければサポートもいただけましたら喜びます！ いただいたサポートは活動費に使わせていただきます！