Googleマップで作ったモンマルトル地図
WordPressのホームページ上にGoogleマップを表示させるには、3つの方法があります。第一は、いちばん簡単な方法で、Googleマップのサイトで埋め込みコードを取得して、WordPressのページにペーストすることです。例として、パリのモンマルトル付近の地図をページに埋め込んでみましょう。
Gooleページを開き、検索窓で「モンマルトル」と入れると、いくつかの候補が出てきますから、「フランス パリ モンマルトル」を選択します。サクレ・クール寺院を中心とする地図が表示されますので、縮尺を調整します。
続いて、この地図の埋め込みコードを取得します。左サイドバーの「共有」ボタンをクリックすると、「共有」ウィンドウが開きますので、「地図を埋め込む」タブを選びます。
<iframeから始まるHTMLコードをコピーし、目的のページ（WordPessのテキストエディタの画面）にペーストすれば、WordPressに地図を貼り付けることができます。
WP Google Mapsプラグインで自作マーカーとルートを入れた地図を作る
Googleマップの埋め込みコードをページに直接埋め込む方法はとても簡単ですが、いくつかの問題があります。第一に、この地図の中のマーカーをクリックしても、もとのGoogleマップにあった詳細な情報が表示されないということです。第二に、この地図を自分流にカスタマイズすることができないという点です。これでは、ただGoogleマップを表示しているだけで、ページ制作者やユーザーにとってメリットはほとんどないといってもいいでしょう。
そこで、WordPress用の地図作成プラグインを利用するという方法を検討してみたいと思います。公開されている地図作成プラグインはたくさんありますが、その中でもっとも機能が豊富なのは、WP Google Mapsというプラグインです。このプラグインを使うと、下の例のように、非常にリッチなコンテンツの地図を作成することができます。
このマップの使い方は、次のページをごらんください。
マップ上に複数のマーカーを設定し、マーカーの地点に関する詳しい情報をinfoWindowで表示させることができます。また、地図上にルートの線（polyline）を好きな色で引くことができます。さらに、自作のマーカー以外のGoogleが作ったオリジナルのマーカーをクリックすると、Googleマップにジャンプして、詳しい情報を得ることができます。また、地図上にプルダウンのメニューを設置して、マーカーの「絞り込み検索」をすることもできます。これらは、Googleマップを貼り付けただけの地図に比べると、はるかに多機能の地図だといえます。
Gooｇleマイマップでマーカーとルートを入れた地図を作る
確かに、専用のプラグインでGoogleマップを作ると、詳しい内容の地図を作れることがわかったのですが、このマップにはいくつかの致命的な欠点があることもわかりました。
第一は、せっかく手間をかけて地図を作成しても、WordPressのホームページで表示させるだけで終わり、この地図だけをスマートフォンですぐに呼び出したり、家族や友人と共有したり、SNSに投稿したりすることができないという問題です。
第二に、WP Google Mapsでは、地図上部にプルダウンメニューを置いて、マーカーの「絞り込み検索」ができるのでとても便利なのですが、マーカーが増えると、メニューからの選択が難しくなるという問題があります。とくに、iPhoneの場合、プルダウンが見づらくなります。
第三に、Polylineを使って地図上にルートを引くことができるのですが、長い距離のルートを1本のPolylineで作成することができず、またルートをマーカーと同じようにメニュー上に表示させることができない、という問題があります。
第四に、表示された地図以外の地点やルートをメニューのマーカーをクリックしても表示させることができないという問題です。
これらの問題をすべて解決してくれるのは、実はGoogleマップ自体で提供されている「マイマップ」です。
以上2つのGoogleマップと同じく、パリのモンマルトルを対象とした地図を「マイマップ」を使って作成したのが、下に示す「パリ散策マップ」です。地図上部に表示された「パリ散策マップ」の左側にある
マークをクリックすると、左サイドにメニューが現れます。
このメニューはWP Google Mapsのプルダウンメニューとほぼ同じで、メニューから好きな項目をクリックすると、マップ上の該当地点が白いリングつきで表示されます。このとき、該当地点はマップ上の中央に表示されるので、とても分かりやすくなっています。しかも、離れた地点であっても、自動的にその地点まで移動して表示されるので、例えば、メニューでモンマルトルとはかなり離れたサンジェルマン・デ・プレのカフェだったとしても、その地点に移動して表示してくれるので便利です。これはWP Google Mapsにはない、すばらしい特徴です。これなら、パリの複数の地域をカバーする「パリ観光マップ」を一つの地図上に作成することができるでしょう。
地点選択メニューの見やすさという点でも、マイマップはWP Google Mapsよりすぐれています。マイマップだと、メインカテゴリー（モンマルトル、サンジェルマン・デ・プレなど）の表示有無をチェックボタンで操作できる上に、サブカテゴリーの表示を最初の4件で示し、5番目以下はクリック一つで表示したり消したりすることができるようになっています。そのおかげで、地点数が増えても、メニューが見づらくなるということがありません。WP Google Mapsブラグインの場合には、プルダウンに表示されるカテゴリーの数を縮減させることができないため、あまりにマーカーが多くなりすぎると、メニューが選びにくくなるという致命的な問題を生じるのです。
また、マイマップでは、自分で作成したマーカー以外のGoogleオリジナルのマーカーをクリックすると、サイドバーが開いて、詳細な情報を同じマップにワンクリックで表示させることができるのに対し、WP Googlee Mapsでは、Googleオリジナルのマーカーをクリックすると、いったんGoogleマップにジャンプした上で、Googleマップ上のサイドバーに情報を表示させるという2段階のステップを踏むことになり、ちょっと面倒です。
最後に、地図上にルートを設置する方法をめぐる方法を比較してみたいと思います。Googleマップでは、マイマップ作成画面の上にルート線を引くメニューがあります。
をクリックし、プルダウンメニューから「ラインやシェイプを追加」を選びます。すると、マウスが＋に変わりますから、ウォーキングやランニングのルートの出発点でクリックします。そのあとは、ルートに沿ってクリックを繰り返して、細かなルートを設定していきます。WP Google Mapsプラグインの場合には、Polylineというルート作成用のツールがあって、正確なルートマップを作ることができますが、Gppgleマップと違って、最初から最後まで1本のルートを作成することが容易ではありません。複数のルートを結合する機能も備わっていないようです。また、他のマーカーと同じように1本のルートをメニューに表示させることもできません。その点、Googleマイマップは、最初から最後まで1本のルートを簡単に作成することができる上、ルートが左サイドバーに他のマーカーと同じように表示されるので便利です。
最後に、これはいちばん重要な点ですが、WP Googlee Mapsプラグインでは、作成した地図を表示できるプラットホームが、WordPressのホームページだけに限られるのに対し、Googleマップの場合には、ホームページに埋め込めるだけではなく、だれでもＰＣやスマートフォンに持っているGoogleマップ上で表示させることができるという違いがあります。これによって、WordPressのホームページを持っていない人でも、マイマップで自分だけのマップを作成したり、友だちとマップを共有したりすることができます。Googleマイマップの詳しい作り方は、別の記事で取り上げたいと思います。
というわけで、WP Google Mapsプラグインは高機能の魅力的な地図作成ツールではあるものの、現時点ではGoogleマイマップに軍配があがるという結論に達しました。