Google Mapをマルチメディアに変身させる高機能プラグイン
最近、WordPressにテキスト、写真、動画、ハイパーリンクなどを自由自在にGoogle Mapに表示してくれる高機能プラグインを見つけました。「WP Google Maps」がそれです。Google Mapをマルチメディアの表示ツールに変身させる画期的なプラグインだと思います。無料版もありますが、十分な機能を使うには、有料版が必要になります。ネットで検索すると、数多くのGoogle Mapに関するプラグインがヒットしますが、何故かこのプラグインを紹介したものはほとんどありません。あっても、情報が古いようです。そこで、このプラグインの使い方について、詳しく説明したいと思います。
WP Google Mapsのデモ
WP Google Mapsがどんなに便利なものかを実感していただくために、まず、このプラグインで作ったGoogle Mapを紹介しておきたいと思います。次に示すのは、パリのサンジェルマン地区に関するGoogle Mapです。
では、この地図がいかにリッチなコンテンツかを示したいと思います。この地図には、
などのアイコン（マーカーといいます）があります。これらのマーカーをタップすると、その地点に関する詳しい情報(Infowindowといます）が表示されます。通常のGoogle Mapだと、テキスト、写真、リンクしか表示できません。しかし、このプラグインを使えば、文章にさまざまな装飾をつけたり、動画を簡単に挿入することができます。
例えば、地図の右上にある「ノートルダム大聖堂」のマーカーをクリック（タップ）してみてください。
以下では、WP Google Mapsのインストール、マップの作成、マーカーの作成などについて、わかりやすく説明していきたいと思います。
WP Google Mapsの使い方
1. プラグインのインストール
無料の場合は、WordPressの「プラグイン」画面で、「新規追加」を選び、"WP Google Maps"で検索し、インストールします。有料版の場合は、WP Google Mapsのサイトで、Pro版を購入し、ダウンロードします。Pro版のダウンロード先は、次のサイトになります。
Pro版を使う場合にも、無料ベーシック版のプラグインをインストールする必要があります。そこで、WordPressの「プラグイン新規追加」画面で、プラグイン名を入力して検索し、次の画面が表示されたら、インストールを実行します。
2. セッティング
まず最初に行うのは、Google Maps API Keyの入力です。Google Mapを利用する際には、API の取得と入力が義務づけられています。API Keyの取得の方法は、次のサイトをごらんください。
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
有料版では、Setting画面の「Advanced」のサブメニューで、API Keyを入力します。ただし、これはオプションです。
3. 新しい地図の作成
それでは、いよいよ新しい地図を作成してみましょう。mapsのメニュー画面に入ったら、左上の「Add New」ボタンをクリックします。
とりあえず、ここでは私が滞在する予定のロンドン中心部の地図を作成してみます。地図名(Map Name)は「ロンドン中心部」としておきます。表示させる地図の幅は、スマホでもきちんと表示させるために、「100%」としておきます。高さは、ロンドンの中心部がかなり広いことを考え、「700px」としておきました。この数値は、あとで変更が可能です。
まず最初の作業は、目的の場所の地図を編集画面に表示させることです。それには、Add a Markerのメニュー画面で、Address/GPSの欄に、表示させたい住所を入れます。ここでは、私が滞在する予定のホテルの近くにある「バッキンガム宮殿」の住所を入れることにします。Titleは「バッキンガム宮殿」とし、住所(address)は Buckingham Palace, Londonとします。そこで、下のSave Markerボタンをクリックすると、バッキンガム宮殿を中心とする周辺地図が正確に表示されます。しかも、マーカーは、ピンポイントのように、バッキンガム宮殿のど真ん中にピンされています。すごい精度ですね。
あとで微調整することになりますが、とりあえずこの地図を保存しておきます。Save Mapボタンを押して地図をしっかり保存します。この段階で保存しておくと、次に地図を開いたとき、ロンドン中心部の地図が一発で呼び出せるようになります。あとでこの地図を投稿画面に挿入するときは、
をショートコードとして使うことになります。
4. マーカーの詳しい設定
次に、マーカーの詳しい設定をしてみましょう。「バッキンガム宮殿」のマーカーを例にして、具体的な手順を説明します。
マーカーのデザインを変える
マーカーを編集するには、画面下のYour Markersで、「バッキンガム宮殿」の右側にある[phoe-icon name="fa-pencil-square-o"]ボタンを押します。
まず、マーカーのデザインを変更してみます。プラグインで提供しているマーカーのデザインは、あまり見栄えがしません。このプラグインでは、ネットで提供されている無料のmap iconを自由に使うことができるようになっています。とくに推奨されているのは次のサイトです。
https://mapicons.mapsmarker.com/
たしかに、Markerに最適のアイコンがたくさん無料で提供されています。また、次のサイトでは、25000以上のマップ用アイコンが提供されています。
https://www.iconfinder.com/search?q=Map
そこで、これらの無料を利用させていただき、地図上でMarkerを作ってみたいと思います。上のサイトから好きなマップアイコンをPCにダウンロードしておきます。「バッキンガム宮殿」については、それにふさわしい次のアイコンを使うことにしましょう。
Custom Markerの右の「Upload Image」ボタンをクリックし、PC内のアイコンを指定し、アップロードします。すると、画面にアイコンが表示されますので、確認してからAdd Markerボタンを押します。
ただし、このとき表示されている画面は、「新しいマーカーを追加する」画面に切り替わっているため、「バッキンガム宮殿」のマーカーを編集するには、下のマーカーリストでもう一度[phoe-icon name="fa-pencil-square-o"]（編集）ボタンをクリックする必要があります。ここは紛らわしいので注意が必要です。
InfoWindowの表示内容をつくる
次はいよいよ、マーカーをタップしたときにあらわれるInfoWindow（情報窓）のコンテンツを作ります。この例でいうと、バッキンガム宮殿に関するタイトル、テキストによる簡単な説明、関連ウェブサイトへのリンク、関連写真、関連動画などを入れることになります。Wikipediaやガイドブックなどを参考にしながら、まずテキスト部分を入力してみました。この入力は、WordPressとほとんど同じテキストエディタおよびビジュアルエディタを使うことができるので、たいへん便利です。テキストのフォント、カラー、太さ、文体、背景色を自由に変えることができます。HTMLのタグを使うことができますから、改行やセンタリング、引用なども簡単にできます。「ビジュアルエディタ」を使えば、HTMLのタグを自分で書く必要もありません。次の画像は、テキストによる解説の部分です。
さらに、視覚にアピールするために、バッキンガム宮殿に関するYouTubeの紹介動画を挿入したいと思います。YouTubeで検索した結果、BBCによる紹介動画がいちばんいいと判断し、この動画をマーカーのInfoWindowに表示させることにしました。「ビジュアルエディタ」で、動画取り込みボタンを押し、YouTubeの「埋め込みコード」を入力します。すると、下の画像のように、動画が編集画面に挿入されました。画像下にクレジットを入れ、再びSave Markerボタンを押します。これで「バッキンガム宮殿」のマーカー編集は完了です。
InfoWindowの出来具合をチェックするには、右側の地図でバッキンガム宮殿のところのマーカーをクリックすれば、テキスト、写真、動画を見ることができます。
投稿画面への地図の表示
この時点での地図を次に表示してみます。
マーカーをクリックすると、バッキンガム宮殿に関する紹介テキスト、英語・日本語のリンク、動画を見ることができます。これと同じ要領で、自分が行きたいスポットにマーカーをつけ、マーカーの編集画面でコンテンツを入力すれば、リッチコンテンツの地図をWordPressに表示することができます。この地図は、単にGoogle Mapの埋め込みフレームを挿入したり、無料のプラグインを利用するだけでは実現できない、表現力の豊かな地図だということができます。
なお、この他に、InfoWindowの中で、「get Direction」というリンクが自動的にでき、現在地からマーカースポットまでの経路を示すこともできるようになっています。これも、現地で観光しながら使うと、便利な機能だと思います。
例えば、St.Pacras Stationにいるとして、そこからバッキンガム宮殿までの経路と所要時間をこのGet Directionで調べてみましょう。
