google mapのピンをgeoguessrのマップにする

# 背景情報

みなさんは[geoguessr](https://www.geoguessr.com/ja)というゲームを御存じでしょうか？

geoguessrは、googleストリートビューの情報を基に、自分が今どこにいるのかを当てるゲームです。このゲームでは日本のみのマップで遊んだり、自分で作成したマップで遊んだりすることができます。

私はこれにドはまりしまして、ゲームが趣味だったインドア人間から、旅行が趣味のアウトドア人間にバージョンアップしました。


また、私が旅行するときは旅行先の良かった場所などをgoogle mapのピンとして保存しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/a9a3a96b-bae1-81f4-a077-32fd5904cdd4.png)


今回はこのピン情報を基に、geoguessrのマップを作成できたら、思い出に浸れるマップができると思いツール作成をすることにしました。

# システム概要
![system.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/da6b7e9f-1b37-9ce8-13c9-15499767420b.png)

システムとしては次のような手順を踏みます

1. googleが提供する機能でマップのピンをcsvとしてダウンロードします
1. プログラムを利用して、geoguessrで読み込めるcsvに変換します。(この時、ストリートビューの情報がある場所を探したりするため、google map static apiを利用します)
1. csvファイルをgeoguessrで読み込んでマップを作成します。

## 1. google mapのピンからcsvに変換する方法

google mapのピンをcsvに変換するには、[googleのデータエクスポート](https://takeout.google.com/)を利用します。

1. 上記リンクページにアクセスし、追加するデータとしてSavedをチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/6744139e-05ca-8c61-68c8-a3ca756466cc.png)
1. ファイル形式として、次のように選択し、エクスポートを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/a4bad7ef-b76c-395c-0b3f-3b378e429cd6.png)
1. すると、自分のgmailにメールが飛んでくるので、ここからダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/584d6836-db79-f853-669c-29bece958781.png)


## 2. 緯度、経度の変換

先ほどダウンロードしたデータは、csvファイルでgoogleマップのURLや名前などを含んでいますが、緯度経度の情報などはありません。
(タイトル、メモ、URL、コメント というカラムしかありません)

そこで、これを緯度経度の情報に変換するために、google street viewの[static api](https://developers.google.com/maps/documentation/streetview/metadata?hl=ja)を利用します。

### street view static apiの有効化

まず、APIを利用するためにkeyを取得します。

1. [GCPのページ](https://cloud.google.com/?hl=ja)にアクセスし、コンソールへ移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/234da169-dec6-fff9-b386-737a72b32fce.png)

1. 次に、プロジェクトを作成します。プロジェクトの作成は、左上の「プロジェクトの選択」を選んで出てくるダイアログか、初めての人であれば作成ボタンがあるかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/e44ea23a-b342-1ae0-838f-a3080abb6089.png)

1. プロジェクトの作成ができたら、左側のメニューバーから「APIとサービス」を選択し、「有効なAPIとサービス」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/f05e882a-bded-28aa-6089-0ff21e003342.png)

1. APIの検索欄にStreet View Static APIと検索すればStatic APIが出てくるので、それを有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/2abcf4c1-7903-2f9d-31f1-c4a1f13bd4d1.png)

1. 請求先のアカウントを設定して、続行します。(今回カード情報などを入力することになると思いますが、APIリクエスト100件、200件くらいでは利用料は発生しませんでした。メタデータのAPIを利用している為だと思われます。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/55424cb9-9b1c-0236-1f38-674564e0c7a8.png)

### API KEYの取得

API KEYの取得は、「APIとサービス」＞「認証情報」からできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/6c421ae3-f093-fcc6-d7b5-b2a6c3b0f75e.png)

API Keyは「鍵を表示します」をクリックすれば表示されるのでクリップボードにコピーしておきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/8bbf97a0-768e-f53b-7f11-458a5820700e.png)


もしない場合は、認証情報を作成とすればAPIキーを作成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/8dfa2aa9-05ad-5b34-08fd-2e7476a63afb.png)

### 緯度経度情報に変換するプログラムのダウンロード

[こちら](https://github.com/takenakadx/GeoguessrConverter)に経度緯度情報を変換するプログラムを置いておいたのでダウンロードします。

ダウンロードしたら、rowdataフォルダに先ほどダウンロードした、自分のマップ情報を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/b6592400-7c18-ffa1-18a6-9e4add9ba141.png)

中にある設定ファイルを編集し、APIキーと先ほどダウンロードしてきたものと入れ替えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/603d353c-40ee-234e-c806-af96a3956ad0.png)

``convert.py``を次のようなオプション付きで実行します。

```
python3 convert.py setting.json
```

プログラムが実行され、reusltsフォルダに結果が保存されていれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/55823817-e33e-f40b-cdf6-cd5cb94a463a.png)

## 3. マップの作成

最後にGeoGuessrのマップを作成します。
[自分のマップ作製ページ](https://www.geoguessr.com/ja/me/maps)に移動し、「新しいマップを作成」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/c390fbab-ad25-ad2e-0cdf-8a3c6d5e8d38.png)

「厳選された場所」を選び、マップ名を入力します。

その後、右上の…から、「CSVファイルのインポート」を選び、先ほど作成したcsvをインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305662/6696a8a9-4154-b4c8-806b-3816dc8f18b6.png)

すると、自動でピンが入力されているので、「保存と公開」でマップを作成して完成です。

# まとめ

今回は、google mapの情報を基に、私の大好きなゲームGeoguessrのマップを作成しました。
自分の行ったところリストで遊ぶと、思い出に浸れたり、一瞬で場所が分かるので結構楽しいです。

また、私が作成したマップも[こちら](https://www.geoguessr.com/ja/maps/65ba56584f4d24f11830c04f)に載せておきます。
よかったら遊んでね。

## 次に追加したいもの
- logを残す機能(street viewの情報が見つからなかった場合に)
- 移動できる場所のみにsourceを限定
- google mapの訪れた履歴からマップを作成する