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

インポートするやり方はデフォルトですので色々な記事が見つかるのですが、エクスポートになるとハードルがぐっとあがりまして、色々と工夫が必要そうです。

つまるところ、Google spreadsheet上のデータを更新したら瞬時にGoogleマップのピンも更新させるのを目的地とします。

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

先達がいらっしゃいました!

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

https://github.com/champierre/sheet2gmap

GitHubさんに公開されてるCodeをZipで落としてきて早速アップ!

当然ですが設定していないので読み込めません。

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

そして、こちらの二つを有効化しました。

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

constants.js
index.html 

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

mapは表示できました!

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

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

12か月間無料登録後

ピンが落ちるかの確認をしたかったので、先にGCPにクレカを登録。すっきり!

そして、ピンがプロットされない・・・

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';

「sheet1」となっておりましたので、ここを「フォームの回答 1」に変更。

ピンが立ちました!

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

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

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

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

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

クラス名はClass Geocodeです。

さて、ここまでちょいちょい調べてまいりましたが、このマッピングのやり方ですと、アプリから見れるようにはどうしてもできないなぁと。今回やりたいこととしましては、GoogleMAPアプリからも使用したいので、GoogleMAPのディベロッパーの方を掘り下げてみようと思います。もちろん、他プロトコルを挟んで出来るものであっても最終的に望みのものに到達できれば良いので可能性を放棄する必要はありません。

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

こちらのやり方を踏襲すれば色分けやカテゴリ分けが出来そうですので、あとはジオコーディングの方をGASで書き足せば当初の目標は果たせるので、少々より道をする感じでしょうか(^^

そして寄り道すること二時間。マイプレイスやリスト、有償・無償、色々な可能性を確認しましたが、デベロッパ側だけではどうしようもない大きな問題が数個あって断念しました。1万を超えるプロットを考えてみた場合、いずれの方法もランニングでカバーしなくてはならないという結論。ですので、運用の方へやりやすさを念頭に構想を変更。マイプレイスでもjs&htmlでも両方とも対応させる方向で決定!

まずは、先日検討していた内容を完成させに行こうと思います。

1.緯度と経度を号までに

2.プロットの表示関係をいじる

3.マイプレイスへの反映方法検討

4.フォームの体裁を整える(スプレッドシートからプルダウンに読み込み等)

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

spreadsheetにGASを書いていきます

シート名と経度と緯度の場所(セル数)を合わせて実行!

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

と、いうわけでフォーム送信時にトリガーを。動かなければイベントの種類を変更時にしようと思います。

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

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

うーん厄介。

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

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

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

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

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

2-2 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

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

2-3 列名とパラメータの設定

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

2-4 フォーム部分の修正

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

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

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

// マーカー位置セット
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 />;
}

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

あとはrankでソートするトリガーを埋め込むなど、運用しながら更新を掛けていってみようと思います。

長文乱文失礼いたしました。

と、思っていたら、3.マイプレイスへの反映方法検討と4.フォームの体裁を整える(スプレッドシートからプルダウンに読み込み等)がまだ終わっておりませんでした。

マイプレイスへの反映方法は使用が固まってからですので、先に4番をば。

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

3パターンほどスプレッドシートからGASでやろうとしたら失敗しまして、GoogleフォームでGASを動かしたらうまく拾えました。

以上です!

Leave a comment

AncoraThemes © 2020. All Rights Reserved.