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

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

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

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

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

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

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

[champierre/sheet2gmap | GitHub](https://github.com/champierre/sheet2gmap)

として公開しています。

<img src="https://github.com/champierre/sheet2gmap/raw/master/images/sheet2gmap.gif" width="480" />

## sheet2gmap の使い方

[デモサイト](https://champierre.github.io/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 スプレッド シートで住所→緯度経度変換](https://qiita.com/blue_islands/items/d7e912fe21512cd4c9fd)を参考にして、住所が入力されると、「緯度」と「経度」が自動的に入力されるようにしておくと便利です。

<img width="717" alt="spreadsheet.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/b5b6ccd9-dd72-a420-d26d-1bf5acf893c5.png">

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

<img width="496" alt="share.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/3a298c85-8c81-b01a-a907-f881863ed423.png">

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

<img width="716" alt="sheet_id.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/d0c01944-7ef5-7102-701d-dd5ced639784.png">

- 次に Google Cloud Platform の API キーを用意します。持っていなければ、GCP のアカウントを作成します。

- GCP コンソール画面の「API とサービス」>「ダッシュボード」>「APIとサービスを有効化」を選んで、「Maps JavaScript API」と「Google Sheets API」を有効化しておきます。

<img width="658" alt="enable_apis.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/9f91754d-f2f8-9f49-d205-a4cf8be14104.png">

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

<img width="269" alt="gcp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/f731ebbe-e4eb-d73d-d151-8429d99e64c5.png">

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

<img width="525" alt="add_api_key.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/e708c4c4-caf5-6dad-147e-f03b2407d779.png">

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

<img width="444" alt="referer.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/74ba1560-a314-0f5b-67e3-d10ec512b388.png">

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

<img width="447" alt="api_restriction.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79133/d7a933f6-e3d6-053c-c782-00127282393a.png">

- 作成した 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)

[青山学院大学古橋研究室 古橋先生](https://www.facebook.com/mapconcierge/posts/3178338705528412)より以下のフィードバックをいただきました。

- Google マップを紙に印刷する場合には、[Google マップ & Google Earth Permissions](https://www.google.com/permissions/geoguidelines/)の「印刷物での使用」の項目を参照して、使用目的による可/不可を確認してください。

- 使用する地図を [OpenStreetMap](https://openstreetmap.jp/) に変更すれば、適切にクレジットすることで自由に印刷物に使用できる。([OpenStreetMap 著作権とライセンス](https://www.openstreetmap.org/copyright/ja)参照)

- Google Spreadsheet ベースなのでそのまま [Glide](https://www.glideapps.com/) と連携してスマホアプリ化できる。 [Glide Apps 版](https://sheet2gmap.glideapp.io/)

## 参考にした情報

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

- [【Google MAP】スプレッドシートAPI連携による日本世界遺産の表示](https://qiita.com/yoshi_yast/items/9e58e515d67d2251f802)
- [GoogleスプレッドシートだけでAPIが作れる「Sheetson」](https://itnews.org/news_contents/product-sheetson/)

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

- [Google スプレッド シートで住所→緯度経度変換](https://qiita.com/blue_islands/items/d7e912fe21512cd4c9fd)

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

- [Google Sheet APIを試す時に詰まったところ](https://qiita.com/yukyt/items/c27c344211423f2bb44d)