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

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

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

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

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

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

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

champierre/sheet2gmap | GitHub

として公開しています。

sheet2gmap の使い方

1. デモサイトを開いて下さい。
2. 「元データ」のリンクをクリックして、Google スプレッドシートを開きます。
3. 名称と住所を入力します。緯度と経度は住所が入力されると、自動的に入力されます。
4. 地図のページをリロードすれば、新しい場所のマーカーが追加されます。

デモサイトのスプレッドシートは誰でも自由に編集できる権限に設定してあります。実際に名称と住所を入力してみてお試し下さい。故意にデータを削除したり、イタズラするはおやめください。もしそのような行為が続くようであれば、編集権限を削除することになります。

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 を自分のサイトで動かすことができます。

参考にした情報

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

• 【Google MAP】スプレッドシートAPI連携による日本世界遺産の表示
• GoogleスプレッドシートだけでAPIが作れる「Sheetson」

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

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

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

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