Googleフォームから入力した情報をレイヤー（色付けやカテゴリ分け）を分けてGoogleマップにピンを落とせないかを検討しました。
後援会のマッピングを行いたいが入力者はパソコンに詳しくない。フォームで名簿情報を入力いただき、マッピングまで行える名簿を作成したい。
という要望をもとに実装した内容となります。ご自身で実装するのも手間という方は有償でお手伝いさせていただきます（＾＾
それでは考察を始めてまいります！
実装のポイントはつまるところ、Google spreadsheet上のデータを更新したら瞬時にGoogleマップのピンも更新させることとなります。
先達の様々な実装を参考にさせていただきます。
https://qiita.com/champierre/items/e7758b69b39476148492
こちらにGoogleスプレッドシートを利用したデータを更新できるマップツールが紹介されております。
htmlとjsファイルだけで動く仕様とされてらっしゃるので、そちらは用意しつつ、実際にはGoogleマップだけでも出来るのかを確認してみたいと思います。
GitHubさんに公開されてるCodeをZipで落としてきてアップいたします。
設定をしておりませんので当然ですが読み込めません（＾＾
Google Cloud PlatformでAPIキーを用意しまして、
Google Sheets APIとMaps JavaScript APIの二つを有効化しました。
APIキーを作成しまして、キーを制限から呼び出すことのできる有効なAPIを指定します。
それぞれにキーを入れてみると・・・
mapは表示できました！
しかし、まだ、ピンされておりません
spreadsheetの方もカラムを合わせたり経度と緯度を載せないとだめです（そもそもそういうコードですので当たり前とも）。
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」に変更しました（合わせることが出来ればここは好きなタブ名に出来ます）。
ピンが立ちました！
さて、実際に緯度と経度を載せてみようとするとここで一つ問題発生が発生しました。
http://geocode.csis.u-tokyo.ac.jp/cgi-bin/simple_geocode.cgi
こちらのコードの場合、番地がカットされてしまうためピンが集まってしまうという問題です。
convertの際に町名＋番地までで号が抜けてしまうということですね。
と言うわけで、GAS（Google Apps Script）の出番となりそうです。
クラス名はClass Geocodeです。
先達の複数の施設名から住所と経度井戸を一括取得してGoogleスプレッドシートに反映するやり方を踏襲します。
http://www.nowhere.co.jp/blog/archives/20200410-232032.html/embed#?secret=gFIsA304RD
さて、ここまでちょいちょい調べてまいりましたが、このマッピングのやり方ですと、アプリから見れるようにはどうしてもできない壁にぶつかりました。Googleマップでのプロットとマイプレイスでのプロットの差です。
GoogleMAPアプリからも使用したいので、GoogleMAPのディベロッパーの方を掘り下げてみようと思いました。もちろん、他プロトコルを挟んで出来るものであっても最終的に望みのものに到達できれば良いので可能性を放棄する必要はありません。
https://qiita.com/yoshi_yast/items/9e58e515d67d2251f802
こちらのやり方を踏襲すれば色分けやカテゴリ分けが出来そうですので、あとはジオコーディングの方をGASで書き足せば当初の目標は果たせそう！？
そして寄り道すること二時間。マイプレイスやリスト、有償・無償、色々な可能性を確認しましたが、デベロッパ側だけではどうしようもない大きな問題が数個あって断念しました。1万を超えるプロットを考えてみた場合、いずれの方法もランニングでカバーしなくてはならないという結論に。
ですので、運用の方へやりやすさを念頭に、構想を変更。マイプレイスでもjs&htmlでも両方とも対応させる方向にしました。
話を戻しまして、実際の実装へ
緯度と経度を号までにしていこうと思います。
spreadsheetにGASを書いていきます
シート名と経度と緯度の場所（セル数）を合わせて実行！
よし、ちゃんと号まで行けました！！
フォーム送信時にトリガーを設定しました。一段回目の実装完了です。
次にプロットの表示変更に挑戦します。
ソースに加えるべきは 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列に引っ張ってくることで色分けすることがこれで出来ると思います！
たかだか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でプルダウンメニューを用意してフォームに読み込ませます。
ちなみに、3パターンほどスプレッドシートからGASでやろうとしたら失敗しまして、Googleフォームの方でGASを動かしたらうまく拾えました。←無駄に数時間ここでも持っていかれました・・・orz
あとはrankでソートするトリガーを埋め込むなど、運用しながら更新を掛けるなど応用は色々と効きます！
以上です。長文乱文失礼いたしました。
ご覧いただいた方にとって有益な情報になりましたら幸甚です！
こちらの記事が少しでもお役に立ったという方は是非youtubeのチャンネル登録をしていただけると嬉しいです！
