写真＋ルートつきGoogleマップの作成方法
第1回 GoogleフォトアルバムとGoogleマイマップの活用
第2回 GPSつきデジタル一眼カメラによる写真地図の作成
第3回 WordPress のプラグインでGPSカメラの写真を表示する方法
どのプラグインを選んだらいいか？
Googleマップをウェブサイトに表示させるだけなら、第1回に述べたように、Googleマイマップを作成して、埋め込みコードを取得し、それを自分のウェブサイトに貼り付けるだけの簡単操作で済みます。ただし、地図上に表示できる情報は、ルート、写真、写真についての簡単な説明、リンク情報などに限定されます。写真を大きく拡大したり、ビデオの映像をいれたりすることはできません。また、ポップアップウィンドウ上で装飾つきのテキストやボタン、アイコンなどをいれるのも難しいと思います。
ポップアップウィンドウにリッチなコンテンツを入れ込むには、やはり専用のプラグインを使うのがいちばん手っ取り早いと思います。私自身、10個以上のプラグインをいれて比較検討してみましたが、GPSのロガーデータ（KMLファイル）をインポートできて、かつ以上に述べたようなリッチなコンテンツを手軽にいれることのできるプラグインは、WP Google Map Pro、Maps Marker Pro、Google Maps Easy Proの3つだけでした。このうち、Maps Marker Proは、1サイト限定、1年間だけの保証つきで39ドルなのに対し、WP Google Maps Proは3サイトまで利用できて、無期限の保証付きで39.99ドルとなっています。また、Google Maps Easy Proは1サイトで29ドル、5サイトで49ドルとなっています。
ちなみに、海外の地図プラグイン評価サイトでも、WP Google Mapsは2018年のベストワンのプラグインにランクされています。
そこで、以下では、WP Google Mapsを使って、GPSのついたデジタル一眼レフカメラやスマホで撮った写真をプラグインに取り込み、かつリッチなコンテンツをいれる方法について詳しく説明したいと思います。
なお、WP Google Maps の基本的な使い方については、次のページをごらんください。
KMLファイルのインポート
では、さっそくWP Google Maps Pro（以下WPGと略記）を使って、カメラのGPS情報をインポートして、Googleマップに表示させてみましょう。WPGでは、MAP作成の「Advanced Settings)のメニューに、KMLファイルのインポート先URLを指定する枠がありますから、ここにあらかじめサーバーにアップロードしておいたKMLファイルのURLを記述します。たとえば、
https://www.medialabo.info/blog/wp-content/KML/20180221.kml
のように記入して、「save map」とします。すると、正しくファイルが読み込まれていれば、画面下の地図に撮影ルート入りの地図が表示されます。
ただし、WPGではKMLが正しく読み込まれない場合も多々ありますから、その場合は、あきらめずに
マーカーの設定と写真の表示
次に、このルートに沿って、撮影した写真の中から地図上に表示したいものを選んで、マーカーをクリックするとinfowindowに写真や説明文などが表示されるようにします。
ここでは、松山城のロープウェイの写真を地図に入れる方法を示したいと思います。
ここでどうしても必要なのは、地図に入れる写真の位置情報（緯度、経度）です。それには、Macであればfinder画面のファイル名を右クリックして、「情報を見る」をクリックしてファイルの詳しい情報を表示させます。
Windows PCの場合は、ファイル名を右クリックし、「プロパティ」を表示させると、Exif情報が見られます。
続いて、マーカーの情報入力欄に、「緯度,経度」情報を転記します。
この画面では、マーカーの編集画面で、infoWindowに表示させる内容を記述することができます。「メディアを追加」メニューで写真を挿入することができます。同時に、サムネイルだけではなく、フルサイズの写真を別ページで表示させることもできます。サムネイル画像ののHTMLにリンクを設定すればいいのです。
最後に、マーカーのアイコンを設定します。できるだけ分かりやすいアイコンを選ぶとよいでしょう。アイコンは、無料で提供するサイトがいくつかありますから、それを利用し、必要な修正を加えることもできます。次のサイトはその一つです。
こちらは、本サイトで一番お世話になっているマップアイコンのサイトです。おしゃれで統一感があります。カスタマイズもできるので、大変便利です。
とりあえず、これまでに作成した地図を表示させると、下のようになります。埋め込むためには、ショートコードを使います。ショートコードは、作成したマップごとに自動的に作られますから、それをコピーして好きな場所にペーストすればOKです。簡単ですね。地図中の左下のリストをクリックすると、地図の該当地点のインフォウィンドウが開き、写真が表示されます。写真をクリックすると、別画面でオリジナルの大きなサイズの写真を見ることができます。ぜひお試し下さい。
これはコンパクトな表示でいいのですが、リストの文字が小さいのと、リストが地図にかぶっているので、地図としても少し見にくいかもしれません。そこで、リストを地図の下に持ってくると、次のようになります。
逆ジオコーディングで緯度・経度を住所に変換してくれるサイト
WP Goole Mapsを作っていて一つ気になった点は、地図上に緯度・経度情報が生で露出してしまうことでした。これを何とか住所表示に変える方法はないかと探した結果、「逆ジオコーディング」というウェブサイトを見つけました。さっそく、松山城のケーブルカーの写真を撮った地点の緯度・経度をいれてみました。
すると、このように「愛媛県松山市丸之内」と正確な情報を出力してくれました。複数の緯度経度を一括して変換してくれるのも便利です。この作業は、WPGからのコピペだけでできるので、苦労しなくても、緯度・経度情報を住所に変換することができそうです。これから、WPGと合わせて活用させていただきたいと思います。