[phoe-icon name="fa-wordpress fa-lg"] 走行ルートを地図に表示できるWP Google Maps
年末年始で何かと慌ただしいので、この記事が今年の最後となるかもしれません。今回は、WordPressのマルチメディア地図作成用プラグインの紹介の続編です。前回は、地図上に気に入ったスポットをマーカーとInfoWindowで表示する方法を紹介しましたが、これだと、「スポット」という言葉が示すように、「点」の情報にとどまっています。前回の記事については、次のリンクをごらんください。
http://medialabo.info/blog/post-1698/
例えば、私が歩いたルートを地図上に示し、かつ、ルート上で写真を撮った場所で、その写真を見せるとか、ルート上の興味深い場所に関する情報をマーカーで示すといったことができないか、と想像をめぐらせました。いろんな関連プラグインをチェックしてみましたが、そんな機能を提供しているプラグインはありませんでした。
ところが、さきほどのWP Google Mapsの英文マニュアルを読んでいたら、なんとこのプラグインでPolylineというものを使えば、私の思い描くルートマップができるということが分かりました。灯台もと暗しとはこのことですね！
Polylineで地図上にルートを描く
例として、東京駅周辺地図を表示させ、散策ルートの設定をしてみたいと思います。WP Google Mapsを起動し、New Mapを開き、Addressに東京駅丸の内口の住所を入れ、Markerを保存します。すると、下のような駅周辺の地図が表示されます。
そこで、画面上のタブの中から、「Polylines」を選択します。今回の散策ルートは、東京駅丸の内口を出発点とし、二重橋を経由して、日比谷公園を終点としたいと思います。
まず、画面左の「Add a New Polyline」をクリックして、新しいルートの作成に入ります。
このPolylineに名前をつけ、ラインの色を指定します。ここでは、オレンジ色を選択しました。
次に、地図上で、出発点をクリックし、最初のマーカーを立てます。続いて、散策ルートに沿って、曲がり角をクリックして、マーカーを立てます。カーブがあるたびに、そこにマーカーを立てながらラインを作っていくのがコツです。また、ラインの精度を高めるために、地図はできるだけズームアップしておくことが必要です。ルートを進むにつれて、地図の表示もラインに沿って動かしていきます。
このような操作を繰り返し、日比谷公園までのルートを作っていきます。マーカーをドラッグすると、ルートを微修正することができます。できあがったラインは下に示すとおりです。
これでよければ、Save Polylineボタンをクリックして、このPolylineを保存します。このラインは、あとでいつでも呼び出して変更することが可能です。画面は、Markerに戻りますが、右の地図にはあ、オレンジ色のルートが表示されているのが分かります。
散策ルート上にマーカーとInfoWindowを挿入する
事前に散策ルート上の興味ある箇所にマーカーを立て、関連情報を入れておけば、散策のお供として、何かと役に立つでしょう。そのやり方を説明します。ここでは、二重橋が正面に見えるところにマーカーを立てて、説明文やリンクなどをInfoWindowに表示させてみたいと思います。この作業は、PCのWordPress上で行います。
画面右の地図で皇居前広場の部分を拡大し、「正門石橋」とある付近で、マウスを右クリック (Macのタッチパッドなら、バッドの右端をタップ）すると、その部分にマーカーが立てられます。markerの名前を「二重橋」とします。その下にあるエディタ画面に、二重橋についての説明や、関連リンクなどを入れておきます。写真や動画は、あとで実際に散歩したときに追加することができますから、この段階ではテキストやリンクを入れておくのが有用でしょう。事前の勉強にもなると思います。
記入が終わったら、Add Markerボタンをタップして、このマーカーを保存します。あとで写真やビデオを追加しいたいときは、このマーカー名を選んで編集することができます。いま入れたマーカーの情報を確認するために、地図上のマーカーをタップすると、下のように、InfoWindowが表示されます。「詳しくはこちらへ」のリンクをクリックすると、Wikipediaの画面に跳び、二重橋についての詳しい情報を知ることができます。
松山市中心部の散策ルートをハイパー地図で表示してみた
さて、これと同じ手法で、私が住んでいる松山市の中心部を、Polylineを使って、ルートマップにして表示させてみました。結果は、次の通りです。さきほど、実際にその一部を自転車で走行しながら、写真を撮りつつ、マップに落とし込んでみました。地図上のマーカーアイコンをタップして、詳しい情報をごらんください。
写真はiPhone7Plusで撮り、途中寄ったスタバでスマホだけでInfoWindowに入れてみましたが、わずか15分ほどで作業は終わりました。これなら、観光地でも、散策しながら写真を撮り、カフェでスマホからWordPressの編集画面にアクセスして、写真やコメントなどをマーカーの編集画面に入力することは十分可能だということが分かりました。来年ロンドンやパリに行ったときには、散策をする前に、いろいろなルートのPolylineを地図上で作成しておき、観光を二倍にも三倍にも楽しみたいと思っています。
スマホ写真の位置情報を活用する方法
最後に、スマホで撮った写真をWP Google Maps上に落とし込むための、とっておきの方法を紹介したいと思います。それは、スマホの写真に含まれる位置情報(Exif,GPS）を利用することです。
スマホの設定で位置情報をオンにしておくと、撮った写真には、位置情報が付与されています。この位置情報を取得するには、スマホに「Exif Viewer」というアプリを入れておくと便利です。例えば、松山市内で撮った写真をこのアプリで見ると、GPSの情報が表示されます。
この情報を、WP Goole Mapsのマーカー画面のAddress欄に入力すれば、地図上にこの写真を撮った正確な位置が表示されます。旅行中などに、スマホで要所要所で写真を撮っておけば、あとでWP Google Mapsにすべての写真を撮った位置が表示されるので、自分のたどったルートを正確に「再現」することができるのです。
もちろん、最近のデジタルカメラには、付属のアプリを使って、同じようにパソコン上に写真入りでたどったルートを表示してくれる機能をもったものが出ていますが、これらの機能は、あくまでもルートと写真だけです。今回紹介したように、写真と同時にInfoWindowで詳しいマルチメディア情報を表示させることはできません。その意味でも、WP Google MapsのPolylineを使った、ハイパールートマップは、まったく新しい旅行体験を提供するものといえるのではないでしょうか？