Googleスプレッドシートを利用した、たぶん史上最も簡単にデータを更新できるマップツール #JavaScript

最も簡単にデータを更新する方法

Webシステムでデータを更新する方法としては、管理画面にログインして、リスト上にデータが並んでおり、「編集」ボタンをクリックすると、フォームが並んだ編集画面に遷移して、そこでデータを更新したあと、「更新」ボタンを押して完了、というのが定番であろう。

しかし、筆者が考える一般の方が最も簡単にデータを更新出来る方法、それはエクセル状のシートの更新だと考えている。

住所を持ったデータがあって、それらを Google マップ上にピンを置いて参照できるようにしたい。その上、それらのデータを随時編集したり、新しいデータを追加したい、という要件があって、まず浮かんだのは Google マイマップでした。しかし、Google マイマップの場合、Google スプレッドシートから簡単に Google マップにデータをインポートはできるのですが、スプレッドシートと Google マップは同期しているわけではなく、データの更新があるたびにインポートの作業をおこなわければならない。Google スプレッドシート上のデータを更新したら瞬時に Google マップの方のピンも更新したいというのが理想だ。

ネット上の情報を色々と参考にして、Google スプレッドシートを更新したら即座に Google マップを更新できる仕組みを作った。そのシステムで他に転用できそうな部分だけを抜き出して sheet2gmap という名前で公開したので、その使い方と仕組みを紹介しようと思う。

Google スプレッドシートを更新したら即座に Google マップを更新できるマップツール sheet2gmap

champierre/sheet2gmap | GitHub

として公開しています。

sheet2gmap の使い方

デモサイトを開いて下さい。

sheet2gmap の仕組み

index.html と constants.js の2つのファイルだけで動きます。
index.html はプログラム本体、constants.js には Google Cloud Platform の API キーと、データ元の Google スプレッドシートの Sheet ID を定義しています。
「名称」と「住所」をカラムに持ったデータを Google スプレッドシート上に用意し、そのシートを公開状態にします。
index.html では、Google Sheets API を読み取り、データをパースして Google Maps 上にピンを追加しています。

自分のサイトで動かす方法

ソースコードをクローンするなり、ダウンロードするなりして自分のサイトにコピーしてください。
Google スプレッドシートにデータを用意し、「名称」「住所」「緯度」「経度」のカラムを用意します。Google スプレッドシートで住所→緯度経度変換を参考にして、住所が入力されると、「緯度」と「経度」が自動的に入力されるようにしておくと便利です。

データが用意できたらシートを公開状態にします。「リンクを知っている全員」が「閲覧者」であれば十分です。

シートID（下図の下線部分）を constants.js にコピーします。

次に Google Cloud Platform の API キーを用意します。持っていなければ、GCP のアカウントを作成します。
GCP コンソール画面の「API とサービス」>「ダッシュボード」>「APIとサービスを有効化」を選んで、「Maps JavaScript API」と「Google Sheets API」を有効化しておきます。

GCP コンソール画面の「API とサービス」>「認証情報」の画面を開きます。

-「認証情報を作成」>「API キー」を選びます。

作成したAPIキーには、以下のように HTTP リファラーでの制限をかけておくと、別のサイトから利用されず安全です。

API の制限では、有効化しておいた「Maps JavaScript API」と「Google Sheets API」の2つのAPIだけに制限しておきます。

作成した API キーを constants.js にコピーします。
index.html の

<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=[API キーを入力してください]&callback=initMap" async defer></script>

の[API キーを入力してください]の部分にも API キーをコピーして下さい。

以上の設定をおこなえば、sheet2gmap を自分のサイトで動かすことができます。

追記(2020/2/4)

青山学院大学古橋研究室古橋先生より以下のフィードバックをいただきました。

Google マップを紙に印刷する場合には、Google マップ & Google Earth Permissionsの「印刷物での使用」の項目を参照して、使用目的による可/不可を確認してください。
使用する地図を OpenStreetMap に変更すれば、適切にクレジットすることで自由に印刷物に使用できる。(OpenStreetMap 著作権とライセンス参照)
Google Spreadsheet ベースなのでそのまま Glide と連携してスマホアプリ化できる。 Glide Apps 版

参考にした情報

Sheetson という Google スプレッドシートの内容を API として簡単に公開できる仕組みを使って、ほぼ要件通りのことを実現している例がありました。大枠はこちらを参考にしたのですが、外部のサービスにはなるべく依存したくなかったので、Sheetson を使う部分は Google Sheets API を直接呼ぶ方法に書き換えました。

Google スプレッドシートで住所を入力するだけで緯度、経度のデータも取得できる仕組みを作るために以下を参考にしました。

Google スプレッドシートで住所→緯度経度変換

Google Sheet API を呼ぶところは結構詰まったのですが、以下を参考にして解決できました。

Google Sheet APIを試す時に詰まったところ