この記事の目次
【WP-GPX-Maps】マラソンや登山ブログでGPSトラッキングを地図に表示させる方法
この記事では、WordPressでGPSの位置情報の軌跡を地図（マップ）に表示させるためのおすすめのプラグインの使い方をご紹介します。使用するプラグインは、「WP-GPX-Maps」です。
以前、下記にある登山の日記を投稿しました。その際にGPSの位置情報を地図上に表示させたいと思ったのですが、プラグインの使い方が詳しく載っているサイトが見つからなかったので記事にしようと思いました。
【絶景】蝶ヶ岳から常念岳までの夏山縦走編（1泊2日登山） こんにちは。サラリーマンで育児に奮闘している「おったん」です。 この記事では、長野県安曇野市の北アルプスにある蝶ヶ岳から常念岳までの縦走についてご紹介します。 蝶ヶ岳か[…]
この記事がWordPressのサイトでGPSの位置情報を表示させたい方や、WP-GPX-Mapsのプラグインの使い方を探している方に少しでもお役に立てばと思います。
この記事のターゲット
- 登山やマラソン系のブログでGPSの軌跡を表示させるための無料ツールをお探しの方
- WP-GPX-Mapsの設定方法について知りたい方
- WP-GPX-Mapsの具体的な使い方について知りたい方
WordPressのプラグイン「WP-GPX-Maps」について
GSPの位置情報を地図上に表示させるために使用したWordPressのプラグインは、「WP-GPX-Maps」というツールです。
他にも「LF Hiker」や「Leaflet Map」を試しましたが、使い勝手と描画の綺麗さを考慮すると「WP-GPX-Maps」が断然おすすめです。
「WP-GPX-Maps」のプラグインでは、日本の国土地理院の地図にGPSの位置情報を表示させることができます。したがって、街中のランニングだけでなく、登山やトレッキングコースの山奥でも詳細な位置情報を利用することが可能です。また、このプラグインは、無料で使用することができます。
WP-GPX-Mapsを使って、GPSの位置情報を表示したサンプルの地図が以下になります。例として、東京都の山手線一周のコースを地図上に表示させています。地図の下の部分には、各地点での標高を表したグラフを表示しています。
このようにGPSの位置情報のログを地図上に美しく表示させることができ、表示させるための手順や設定方法もとても簡単です。
おったん標高のグラフや軌跡の一部をクリックするとそれぞれ連動した部分が表示されます
WP-GPX-Mapsのインストールと設定について
WP-GPX-Mapsのプラグインのインストール方法
WP-GPX-Mapsのプラグインのインストール手順は以下の通りです。通常のプラグインの導入と同じです。
- WordPressの管理画面からプラグインのメニュー画面へ移動します。
- プラグインの新規追加をクリックし、「WP-GPX-Maps」を検索します。
- 検索結果から、「WP-GPX-Maps」のプラグインを探し、「今すぐインストール」のボタンをクリックします。
WP-GPX-Mapsのプラグインの設定方法
プラグインの設定は以下のとおりです。試しにグラフを表示させたい場合は、以下の設定を行わなくてもグラフの表示は可能ですので、次の「WP-GPX-Mapsの使い方について」の説明へお進みください。
- WordPressの管理画面 -> WP-GPX-Mapsへ移動します。
- 「GPS軌跡」、「設定」、「Administration」、「ヘルプ」のタブが表示されるので、「設定」のタブを選択します。
- 設定 -> 一般設定 -> 地図の横幅 、高さ、グラフの高さ の設定では地図のサイズ変更が可能です。当ブログでは、様々なデバイスの表示に対応させるために横幅だけ100%に変更しました。
- 設定 -> 一般設定 -> Thunderforest API Keyについては、設定しなくても国土地理院の地図を利用することが可能なのでブランクのままで問題なかったです。
- 設定 -> サマリー表示は、地図やグラフの下に以下のような情報を載せたい場合に使用します。サマリーの情報の表示は英語表記です。サマリー情報どれかを表示するためには、最初に一番上の「サマリー表示」のチェックボックスを選択する必要があります。また、GPXファイル内に心拍数や気温などの情報がない場合は表示させることはできません。
Total distance: 42.79 km
Max elevation: 39 m
Min elevation: 2 m
Total climbing: 201 m
Total descent: -202 m - 設定 -> 地図 -> デフォルトの地図 の設定では、最初に表示する地図を予め設定しておくことができます。「GPS Map (Japan)」が国土地理院の地図になります。
- 設定 -> 地図 -> 地図上のGPX軌跡色 の設定では、GPSの位置情報の軌跡の色を選択できます。
- 設定 -> チャート -> 標高 の設定では、地図の下に表示される標高のグラフを表示するかどうか選択できます。
- 設定 -> チャート -> 標高水位の色 の設定では、地図の下に表示される標高のグラフの色を選択できます。
その他、色の変更や細かい表示の変更はも必要に応じて可能ですが、基本的には以上の設定で十分かと思います。
WP-GPX-Mapsの使い方について
WP-GPX-Mapsのプラグインの使い方については以下のとおりです。
- WordPressの管理画面 -> WP-GPX-Mapsへ移動します。
- 下記のWP-GPX-Mapsの設定画面の「GPS軌跡」のタブの画面で「Choose Files」のボタンをクリックします。
- 表示させたいGPSの位置情報のGPXファイルをWordPressのサイトへアップロードします。
- GPXファイルアップロードすると下記のように「sgpx gpx=・・・」から始まるショートコードが生成されます。
- 生成されたショートコードをコピーして投稿の編集画面で記事内の任意の場所に貼り付けます。
- プレビュー画面でWP-GPX-Mapsの地図が表示され、GPXの位置情報の軌跡が表示されているか確認します。
プレビューを確認して、下のような地図が表示されていれば、GPSの位置情報を地図に表示させる設定は完了です。
②生成されるコードを「投稿の編集」の画面に貼り付け
たったこの２ステップだけでGPSの軌跡が表示されます
【WordPress】WP-GPX-Mapsの地図が白くなって何も表示されないときの対応策 こんにちは。サラリーマンで育児に奮闘している「おったん」です。 この記事では、GPSのトラッキング（軌跡）を地図上に描画するためのW[…]
まとめ
この記事では、WordPressでGPSのログデータ（位置情報の軌跡）を地図（マップ）に表示させるためのおすすめのプラグインの使い方をご紹介しました。
今現在、スマホや時計などでもGPSで位置情報がわかるようになり、移動経路や移動速度を気軽に計測できるようになりました。GPSの機能を利用してマラソンやトレッキング、登山を行う際に移動した軌跡（トラッキング）のデータを記録して、WordPressで公開したという人も多いかと思います。
この記事がWordPressのサイトでGPSの位置情報を表示させたい方や、WP-GPX-Mapsのプラグインの使い方を探している方に少しでもお役に立てば幸いです。
