wp-gpx-maps_icatch

【WordPress】GPSの位置情報を地図に表示させるにはWP-GPX-Mapsが簡単でおすすめ

【WordPress】GPSの位置情報を地図に表示させるにはWP-GPX-Mapsが簡単でおすすめ

こんにちは。サラリーマンで育児に奮闘している「おったん」です。

この記事では、WordPressでGPSの位置情報の軌跡を地図(マップ)に表示させるためのおすすめのプラグインの使い方をご紹介します。使用するプラグインは、「WP-GPX-Maps」です。

以前、下記にある登山の日記を投稿しました。その際にGPSの位置情報を地図上に表示させたいと思ったのですが、プラグインの使い方が詳しく載っているサイトが見つからなかったので記事にしようと思いました。

この記事がWordPressのサイトでGPSの位置情報を表示させたい方や、WP-GPX-Mapsのプラグインの使い方を探している方に少しでもお役に立てばと思います。

あわせてよみたい関連記事

【絶景】蝶ヶ岳から常念岳までの夏山縦走編(1泊2日登山) こんにちは。サラリーマンで育児に奮闘している「おったん」です。 この記事では、長野県安曇野市の北アルプスにある蝶ヶ岳から常念岳までの縦走についてご紹介したいと思います。 […]

常念岳_蝶ヶ岳

「WP-GPX-Maps」のプラグインについて

GSPの位置情報を地図上に表示させるために使用したWordPressのプラグインは、「WP-GPX-Maps」というものです。

このプラグインでは、日本の国土地理院の地図にGPSの位置情報を表示させることができます。したがって、街中のランニングだけでなく、登山やトレッキングコースの山奥でも詳細な位置情報を利用することが可能です。また、このプラグインは、無料で使用することができます。

WP-GPX-Mapsを使って、GPSの位置情報を表示したサンプルの地図が以下になります。例として、東京都の山手線一周のコースを地図上に表示させています。地図の下の部分には、各地点での標高を表したグラフを表示しています。

このようにGPSの位置情報のログを地図上に美しく表示させることができ、表示させるための手順や設定方法もとても簡単です。

man_smile4おったん
これが手軽に使えるとは素晴らしい!
標高のグラフや軌跡の一部をクリックするとそれぞれ連動した部分が表示されます

WP-GPX-Mapsのインストールと設定について

プラグインのインストール

WP-GPX-Mapsのプラグインのインストール手順は以下の通りです。通常のプラグインの導入と同じです。

  1. WordPressの管理画面からプラグインのメニュー画面へ移動します。
  2. プラグインの新規追加をクリックし、「WP-GPX-Maps」を検索します。
  3. 検索結果から、「WP-GPX-Maps」のプラグインを探し、「今すぐインストール」のボタンをクリックします。
おったん
プラグインのインストールは他のものと同じなので簡単です

プラグインの設定

プラグインの設定は以下のとおりです。試しにグラフを表示させたい場合は、以下の設定を行わなくてもグラフの表示は可能ですので、次の「WP-GPX-Mapsの使い方について」の説明へお進みください。

  1. WordPressの管理画面 -> WP-GPX-Mapsへ移動します。
  2. 「GPS軌跡」、「設定」、「Administration」、「ヘルプ」のタブが表示されるので、「設定」のタブを選択します。
  3. 設定 -> 一般設定 -> 地図の横幅 、高さ、グラフの高さ の設定では地図のサイズ変更が可能です。当ブログでは、様々なデバイスの表示に対応させるために横幅だけ100%に変更しました。
  4. 設定 -> 一般設定 -> Thunderforest API Keyについては、設定しなくても国土地理院の地図を利用することが可能なのでブランクのままで問題なかったです。
  5. 設定 -> サマリー表示は、地図やグラフの下に以下のような情報を載せたい場合に使用します。サマリーの情報の表示は英語表記です。サマリー情報どれかを表示するためには、最初に一番上の「サマリー表示」のチェックボックスを選択する必要があります。また、GPXファイル内に心拍数や気温などの情報がない場合は表示させることはできません。
    Total distance: 42.79 km
    Max elevation: 39 m
    Min elevation: 2 m
    Total climbing: 201 m
    Total descent: -202 m
  6. 設定 -> 地図 -> デフォルトの地図 の設定では、最初に表示する地図を予め設定しておくことができます。「GPS Map (Japan)」が国土地理院の地図になります。
  7. 設定 -> 地図 -> 地図上のGPX軌跡色 の設定では、GPSの位置情報の軌跡の色を選択できます。
  8. 設定 -> チャート -> 標高 の設定では、地図の下に表示される標高のグラフを表示するかどうか選択できます。
  9. 設定 -> チャート -> 標高水位の色 の設定では、地図の下に表示される標高のグラフの色を選択できます。

その他、色の変更や細かい表示の変更はも必要に応じて可能ですが、基本的には以上の設定で十分かと思います。

おったん
色などをこだわる場合は、細く設定が可能ですが、特に設定を変更しなくても問題なしです

WP-GPX-Mapsの使い方について

WP-GPX-Mapsのプラグインの使い方については以下のとおりです。

  1. WordPressの管理画面 -> WP-GPX-Mapsへ移動します。
  2. WP-GPX-Mapsの設定画面で軌跡のタブの画面で「Choose Files」のボタンをクリックします。
  3. GPSの位置情報のGPXファイル探し、WordPressのサイトへアップロードします。
  4. GPXファイルアップロードすると「sgpx gpx=・・・」から始まるコードが生成されます。
  5. 生成されたコードをコピーして投稿の編集画面で記事の好きな場所に貼り付けます。
  6. プレビュー画面で地図が表示されGPXの位置情報が表示されているか確認します。wp-gpx-mapsの画面

プレビューを確認して、下のような地図が表示されていれば、GPSの位置情報を地図に表示させる設定は完了です。

おったん
①プラグインをインストールしてGPXファイルをアプロード
②生成されるコードを「投稿の編集」の画面に貼り付け
たったこれだけでGPSの軌跡が表示されます
WP-GPX-Mapsの地図がうまく表示されない場合、対応策を以下の記事にまとめていますので、参考にしてみてください。
あわせて読みたい関連記事

【WordPress】WP-GPX-Mapsの地図が白くなって何も表示されないときの対応策 こんにちは。サラリーマンで育児に奮闘している「おったん」です。 この記事では、GPSのトラッキング(軌跡)を地図上に描画するためのW[…]

WP-GPX-Maps_issue_icatch

まとめ

この記事では、WordPressでGPSのログデータ(位置情報の軌跡)を地図(マップ)に表示させるためのおすすめのプラグインの使い方をご紹介しました。

今現在、スマホや時計などでもGPSで位置情報がわかるようになり、移動経路や移動速度を気軽に計測できるようになりました。GPSの機能を利用してマラソントレッキング登山を行う際に移動した軌跡(トラッキング)のデータを記録して、WordPressで公開したという人も多いかと思います。

この記事がWordPressのサイトでGPSの位置情報を表示させたい方や、WP-GPX-Mapsのプラグインの使い方を探している方に少しでもお役に立てば幸いです。

wp-gpx-maps_icatch
最新情報をチェックしよう!