Google Mapsの地図にGPSログを描いてブログに画像として表示する方法

Update：GPSログ(GPX)をWebにアップするだけで、ブログに貼り付けるコードを生成するWebサービスを公開しました。【関連記事はこちら】

ブログにGoogle Mapsを表示させるととても時間がかかります。これはページの最初の方に地図を貼付けたい時に困ります。GoogleのStatic Map API V2を使えば、地図を画像として表示できるので高速化できますが、単純にAPIを呼び出しただけでは地図が表示されるだけ。例えば自分が追加で表示したいGPSの軌跡つきでは表示されません。

そこで、Static Map API V2のドキュメントを参考に、GPSログも一緒に画像表示してみました。この方法を使えば、Google Mapsをブログに埋め込むのと(ほぼ)同じ見た目でブログの地図表示を高速化できます。Google Mapsの地図本体には画像からリンクしておけば良いでしょう。地図が画像になるのでRSSリーダーなどの中でも地図が表示されるようになります(※ソフトによるようです)。

↓サンプル。すぐ表示されますよね。クリックすればGoogle Mapsに飛びます。


さらには、Google Mapsの画面をスクリーンキャプチャして使うのはGoogle Mapsのライセンス条項違反ですが、この方法はGoogleのStatic Map APIを使っているのでライセンス違反もありません。

デメリットと言えば、ブログの画面のまま地図をズームしたりスクロールしたりできなくなることと、作るのに手間がかかることの2点くらいでしょうか。

方法概略
Static Map APIには、パス情報の追加方法が定められています。以下の文字列に続けて、パス(線)の情報(緯度1,経度1|緯度2,経度2|...の繰り返し)をくっつけるだけで、Googleからパス付きの画像が返されてきます。上のサンプル地図はこの方法で表示しています。

https://maps.googleapis.com/maps/api/staticmap?size=640x400&sensor=false&zoom=14&path=color:0xff0000a0|weight:3|

GPSデータを付け加えるとこうなります。

https://maps.googleapis.com/maps/api/staticmap?size=640x400&sensor=false&zoom=14&path=color:0xff0000a0|weight:3|緯度1,経度1|緯度2,経度2|...

黄色のマーカー部分は、制限の中で適当に変えることができます。意味は単語の通りですので、いろいろ試してみてください。迷ったStatic Maps API V2 デベロッパー ガイド(日本語)を読みましょう。簡単ですので手を動かせばいろいろ分かると思います。

練習
以下のURLをコピーしてブラウザのアドレスバーに入れてみてください。地図に線が一本引かれた画像が表示されます。後は緯度経度のデータを増やすだけです。

https://maps.googleapis.com/maps/api/staticmap?size=640x400&sensor=false&zoom=18&path=color:0xff0000a0|weight:10|35.61202,139.39144|35.61132,139.39320

手順
1. GPSデータをできる限り座標だけのシンプルな形で保存する。
最初に重要となるのが、GPSデータのポイント数を減らすこと。APIにはURL全体で2048文字の制限があるようなので、80ポイント程度に単純化することが必要です。
私が使っているGPSデータ変換ソフトのGPSBabelには、「Translation Options -> Filters -> Routes & Tracks」に「Simplify」の機能があるので、GPSBabelユーザーの方はこれを80程度にしておきましょう。他のソフトでもおそらく同様の機能があると思います。


Filtersボタンを押すと以下の画面になります。SimplifyをチェックしてLimit Toは80に。


以下、GPSBabelでCSVフォーマットのファイルgpsdata.csvにしたものとして例を記載します。

gpsdata.csvの内容:
35.61202, 139.39144,
35.61132, 139.39320,
35.61184, 139.39534, ...

2. URLとして入力するため1ラインにする。
上のCSVデータは1ポイントごとに改行されているので、この改行をすべて取り払い、さらにAPIに沿った文字列にする必要があります。私はMacなので、もともと入っているPerlを使いました。ツールは何でも良いのですが、置換の代表格sedは改行の扱いが難しいようなのでPerlで。ツールの敷居が高いという方はエディタの置換機能を使っても良いでしょう。

# perl -pe 's/, /,/g' gpsdata.csv | perl -pe 's/,\n/|/g' > gpsdata2.csv

これでgpsdata2.csvに以下のようなデータができます。(最後の「|」は不要です。ご愛嬌ということで。編集時に削除してください。)

35.61202,139.39144|35.61132,139.39320|35.61184,139.39534| ... |

3. 地図を表示するHTMLデータを作成する。
以下の【赤字】部分に、上で作ったGPSデータを貼付けるだけです。

<div class="separator" style="clear: both; text-align: center;"><img border="0" width="560" height="400" src="https://maps.googleapis.com/maps/api/staticmap?size=640x400&amp;sensor=false&amp;zoom=14&amp;path=color:0xff0000a0|weight:3|【緯度,経度データの繰り返し】" /></div>

4. こちらのサンプルは画像をクリックすると元のGoogle Mapsに飛びます。
青字のIDは、Google Mapsの埋め込みコードを表示させ、該当部分をコピーしましょう。

<div class="separator" style="clear: both; text-align: center;"> <a href="https://mapsengine.google.com/map/embed?mid=【Google Mapsを埋め込むためのID】" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" width="560" height="400" src="https://maps.googleapis.com/maps/api/staticmap?size=640x400&amp;sensor=false&amp;zoom=14&amp;path=color:0xff0000a0|weight:3|【緯度,経度データの繰り返し】" /></a></div>

5. ブログのHTML編集画面の希望位置に貼付ける。
<div...>みたいな難しそうな画面が出るページです。分からない方は、壊しても良いテストページを作って練習してからにしましょう。

以上、簡単なような難しいような、よく分からない感じと思いますが、やっていることは単純ですので、一度作ってみると分かると思います。でも、HTMLの生成まではApple Scriptか何かで自動化できると楽ですね。後で(いつか?)試してみます。

おまけ
画像のみのサンプル。クリックしてもGoogle Mapsに飛びません。


Update：GPSログ(GPX)をWebにアップするだけで、ブログに貼り付けるコードを生成するWebサービスを公開しました。【関連記事はこちら】

参考文献
Static Maps API V2 デベロッパー ガイド(日本語)