リッチなコンテンツを地図上に表示できるWordPressプラグイン「WP Google Maps」

ウェブサイト上にお店や会社の所在地を地図で表示したり、旅の紀行記や観光案内のページに地図を入れたりするケースは多くみられます。Googleマップを使って地図を挿入する企業も多いことでしょう。

WP Google Mapsプラグインは独自のマップを作成できる高度な機能を搭載していますが、実際のところあまり知られていません。地図上のマーカーを自由にカスタマイズしたり、地図上にルートを表示したり、マーカーに写真や動画、解説などの付加情報を入れるといったこともできます。それによって、Googleマップをよりリッチな「マルチメディア」ツールとして表現できるのです。

有料版のWP Google Mapsは、このようなリッチで魅力的なGoogleマップをWordPressサイトに手軽に表示できるプラグインです。この記事では、WP Google Maps（有料版）の基本的な使い方から、より高度な使いこなしまでを具体的な事例を交えて詳しく解説します。

WP Google Mapsの特徴

WP Google Mapsは数あるマップ系のプラグインの中ではもっとも高機能でできることが多いです。例えば、次のことができます。

任意のサイズ、デザイン、内容のGoogleマップを作成できる。
マップをショートコード化。
保存済みのマップの複製化。
マーカーのフィルタリング（絞り込み検索）。
マーカーへのテキスト、写真、動画の挿入が容易（ビジュアルエディター）。
マーカーとマップのエクスポート、インポート（他のWordPressサイトへの転用などに使える）。
マーカーのアイコンを自由にデザインできる。
ポリラインを用いて、マップ内にルートなどの線描をすることができる。

WP Google Mapsのインストール

WP Google Maps

WordPressの管理画面から「WP Google Maps」を検索してインストールして下さい。

もしくは、下記のリンクからプラグインをダウンロードし、「プラグイン」→「新規追加」→「プラグインのアップロード」よりインストールし、有効化してください。

WP Google Maps

APIキーの入力

上記のプラグインをインストールすると、管理画面に下のような表示が示されます。Setting（設定）をクリックして、地図作成の基本設定を行います。このプラグインは、日本語化には対応していないため、そのままでは英語表示になって、画面が見にくいのですが、Chromeブラウザなら、「Google翻訳」拡張機能を使って、表示を日本語化することができます。以下では、Google翻訳で日本語化した画面を使って説明します。

自分の管理しているWordPressの画面にGoogleマップを表示させるには、Google APIキーを取得しなければならないことがあります。WP Google Mapsプラグインもその一つで、プラグインの設定画面にGoogle APIキーを入力しないと、Google Mapsを表示することができません。

APIキーを取得したら、プラグインの「Advanced（高度の設定）」タブを開いて、Google Maps APIキーを入力します。これで、プラグインでGoogleマップを表示させることができます。

設定のメニューは上の画像に示すように、「一般設定(Maps)」「infoWindows（情報ウィンドウ）」「Marker Listings（マーカーリスト）」などに分かれており、細かく設定することが可能です。最初はデフォルトの設定通りにしておき、あとで好みのスタイルに変更すればいいでしょう。ここでは、「高度な設定」でAPI を入力することが大切です。APIについての説明は、次のTCDブログを参照してください。

2019.07.03

2022.05.26

【初心者向け】APIとは何か。APIについて基本的な知識をまとめています。

IT・WEB業界で働いている方は、「API」という言葉を目にしたり、耳にしたりすることは多いでしょう。実は一般の方々も、知らず知らずのうちに活用しています。しかし、一般の方はもちろん、エンジニアの方でさえも初心者の方に向けて上手く説明できるかといわれれば、そうとは限りません。というわけで、当...

最初の地図の作成

それでは、いよいよ最初の地図を作成することにしましょう。管理画面にはこのプラグインに関するメニューが3つありました。このうち、一番上の「マップ」をクリックします。すると、New Map（新しいマップ）の画面が表示されます。これは、デフォルトで作成されている新しい地図です。「編集」ボタンをクリックすると、最初の地図を編集して、好みの地図を作成することができます。「編集」ボタンの右側にあるのは、この地図をWordPressサイトに表示させるためのショートコードです。

下の図は、新規地図の編集画面です。

ここでは、「一般設定」のタブだけを使い、必要な情報を入れていきましょう。初期設定画面では、アメリカ西部の地図が表示されていますが、これはプラグインがアメリカ製のためにこうなっています。いずれ変更されるので、ここではそのままにしておきます。

まずしなければならないのは、マップ名の変更です。表示したいと地図は東京の新宿駅周辺だとします。そこで、マップ名を「新宿駅周辺」と変更します。次の「ズームレベル」、「幅」、「高さ」はとりあえずデフォルトのままにしておきます。

最初のマーカーの作成

目的の新宿駅周辺地図を表示させるには、「新しいマーカーを追加する」の下にある「アドレス/ GPS」の空欄に住所を入れます。いちばん簡単で分かりやすいのは、「新宿駅」と入力することです。ただし、これだけでは地図の表示は変わりません。マーカーの位置をGoogleマップ上に表示させるには、その下の「マーカーを追加」ボタンをタップし、さらにその下の「マーカーを編集」画面で「編集」ボタンを押さなければなりません。初めて使用するときは、ここが少し戸惑うところです。

「既存のマーカーを編集する」画面の右下にある（編集）ボタンをタップすると、右上の地図がマークのついた日本列島に変わります。これで、目的の新宿駅の地図を表示させる準備ができました。Googleマップですから、右下の＋ボタンをクリックすることで、地図を拡大することができます。

新宿駅が大きく表示されるまで＋を押し続けて、地図を拡大します。

これで、ベーシックな新宿駅周辺の地図が「新宿駅」のマーカーつきで作成できました。

WordPressサイトに地図を表示する

この地図をWordPressサイトに表示させるには、必ず「地図を保存」ボタンを押さなければなりません。これを忘れると、せっかく作った地図の情報が消えてしまいます。保存した地図をWordPressサイトに表示するには、マップ設定画面すぐ下の「ショートコード」[wpgmza id=”1″]をコピーして、表示したいページの部分にペーストすればいいのです。マップ編集画面と同じ地図がWordPressのページに次の通り表示されます。

マーカーのカスタマイズ

複数のマーカーを立てる

ここまでは、無料版のWP Google Mapsのプラグインでできることです。これだけなら、わざわざプラグインを入れなくても、Googleマップの「埋め込みコード」を使うだけでも実現します。けれども、Pro版（＄39.9）を購入すれば、無制限にマップを生成したり、マーカーをさまざまにカスタマイズしたり、情報ウィンドウにマルチメディア的なコンテンツを表示したりと、多機能な地図を作成することができるようになります。そこで、以下では、Pro版のWP Google mapsを使って、より高度な地図を作成する方法を解説したいと思います。

最初に作った地図には「新宿駅」というマーカーが一つだけ立っています。WP Google Mapsでは、一つの地図にマーカーをいくつでも立てることができます。また、マーカーのデザインを好きなアイコンに変えることも簡単にできます。さらに、マーカーをクリックすると「情報ウィンドウ」で地点の説明を表示させることもできます。

二つ目のマーカーを地図に追加するには、「新しいマーカーを追加する」のアドレス欄に、地点の名称または住所を入力します。ここでは、「京王プラザホテル」という名称を入れてみました。すると、下部に京王プラザホテルに該当する地名の一覧が表示されます。ここでは、新宿駅に近い京王プラザホテルを表示したいので、一番上の住所を選びます。

すると、マーカー入力欄が消え、その代わりに右の地図に京王プラザホテルのところに新しいマーカーが立ちます。下の「既存マーカーを編集する」欄に京王プラザホテルのマーカーが追加されますので、右側の編集ボタン①をクリックすると、右上の地図上の中央部分に、京王プラザホテルのマーカーが表示されます。このようにして、地図上にいくつでも新しいマーカーを追加することができます。

マーカーのアイコン変更（Pro）

このように、WP Google Mapsでは、地図上に複数のマーカーを表示させることができますが、有料のPro版にアップグレードすると、それぞれのマーカーのアイコンを自由に変更することができます。これによってマーカーの種類を視覚的に分類することができます。ここでは、新宿駅のマーカーを「電車」のアイコンに変えてみましょう。

そのためには、無料で配布されているアイコン・ギャラリーにアクセスして、そこから電車系の「マップアイコン」をダウンロードして、マーカーとしてインストールします。無料のマップ用アイコンはいくつか公開されていますが、いちばん使いやすいギャラリーとして、「map icons collection」を使うことにします。次のサイトです。

Map Icons Collection

Transportation（交通）のメニューを開き、アイコンリストから「Train（電車）」を選びましょう。好きなスタイルとカラーを選ぶことができます。ここでは、デフォルトのスタイルで紫を設定することにします。

Train（電車）のアイコンをタップすると、カラーを指定する画面になりますので、好きな色（ここでは紫）を指定します。

そこで、画面左下のGenerateボタンを押せば、Trainのマップアイコンの色が変わり、ダウンロード可能なアイコンが表示されます。この中から好きなものを選んで、マウスの右クリックでアイコンを自分のPCの保存することができます。ここでは、一番左の標準的なアイコンを選ぶことにしましょう。

このアイコンのところでマウスを右クリックして、画像を保存します。

WP Google MapsのPro版では、マーカーの編集画面の下の方に、「カスタムマーカー」の欄が追加されています。いま保存したアイコンでマップのマーカーを差し替えるには、画面下の「画像をアップロード」ボタンを押して、差し替えたい電車のアイコンを指定すればいいのです。

新しいマーカーの画像をアップロードすると、下のような画面になります。

京王プラザホテルのマーカーについても、同じようにして、というアイコンに差し替え、保存します。すると、地図には次のように、2つのマップアイコンのマーカーが表示され、わかりやすい地図になりました。

マーカーリストの表示と並び替え

上で作成した地図では、地点を示すマーカーが地図の中にアイコンとしてだけ表示されていましたが、これらのマーカーを地図の下に「マーカーリスト」として別個に表示させることができます。また、このリストの表示方法（マーカーリストスタイル）を変えたり、リストの並べ替えをすることもできます。それには、メニュータブの「マーカーリスト」(Marker Listing Otions)をタップします。次のような選択画面が表示されます。

例として、マーカーリストの表示スタイルを「基本リスト」(Basic List)に指定すると、WordPressサイトでの表示は次のようになります。リストには、アイコンと住所が表示されています。住所のところには、マーカーのタイトルが表示されています。タイトルを変えることによって、マーカーリストの表示も変わってきますので、マークリストを表示させるときには、「タイトル」もこれにふさわしい説明文につけ替えるといいでしょう。

マーカーの表示コンテンツをリッチにする

マーカーの説明 (Pro)

WP Google Mapsのプロ版では、マーカーの説明をタイトルだけではなく、より詳しい記述をくわえることができます。たとえば、「新宿駅」のマーカーならば、次のような説明をエディター画面に加えることができます。

これを保存し、マーカーリストの表示スタイルを「基本の表」(Basic Table)に設定すると、WordPressサイトでの地図は、次のように、説明リスト入りで表示されるようになります。

マーカーに写真、動画を追加する

マーカーリストには、テキストだけではなく、写真などのイメージを入れることもできます。マークコンテンツエディターの下にある「ギャラリー」(Gallery)をタップして、画像を挿入すると、マーカーリスト欄に画像を表示させることができます。試しに、新宿駅の写真を読み込ませてみると、どうなるでしょうか。

この画面で「マーカーを保存」すると、WordPressサイトのページは、次のようになります。マーカーリストの右側に写真が表示されますね。複数の写真を追加すると、スライドショー（マーカーギャラリー）になります。

情報ウィンドウ

マーカーリストは、地図の下に表示されるコンテンツでしたが、地図の中でマーカーをタップしたり、マウスを乗せたりするとポップアップのように表示させる「情報ウィンドウ」(Info Window)があります。この情報ウィンドウの中には、マーカーコンテンツエディターで作成したテキストや、写真、動画などが表示されます。作成の仕方は、おなじみのWordPressの旧エディタと同じです。ビジュアルエディタに加えて、HTMLエディタも利用できます。

YouTube動画を情報ウィンドウに表示させるには、テキストエディターにして、YouTube動画で取得した「動画の埋め込み」コード（<iframe> . . . </iframe>)をエディタ画面にペーストします。そして、「マーカーを保存する」(Save Marker)ボタンをタップします。すると、「下の既存のマーカーを編集する」（Edit Existing Marker)画面に動画が表示されます（下の写真は、新宿駅と京王プラザホテルに動画を入れたものです）。また、地図のマーカーをタップすると、マーカー上に情報ウィンドウがポップアップして、説明のテキストと動画が表示されます。

表示スタイルの選択

情報ウィンドウの表示スタイルは、「設定」→「情報ウィンドウ」で次の4つの中から選択することができます。

デフォルトの情報ウィンドウ
モダン情報ウィンドウ
モダンプラス情報ウィンドウ
円形の情報ウインドウ

これに加えて、表示される画像の幅や高さを変更することができます。

検索メニューによるマーカーの絞り込み

WP Google Mapsでは、マップ上部の「Filter by」をクリックして、プルダウンメニューを開くと、「絞り込み検索」をすることができます。今回紹介した新宿席周辺地図のように狭いエリアで限られた数のマーカーしか使わない場合には、絞り込み検索は必要ありませんが、地図の範囲がもっと広範囲に及び、マーカーの数や種類が多くなる場合には、「マーカーによる絞り込み検索」を使うと大きな威力を発揮します。

それでは、このようなマーカー絞り込み検索はどうやって作成するかを説明します。例として、さきほどから作成している「新宿駅周辺」地図をとりあげましょう。手順としては、各マーカーを「カテゴリー」に分類することから始めます。WP Google Mapsには、WordPressのカテゴリーとは別に、独自のカテゴリー設定画面があります。これは、設定画面のマップの下にある「カテゴリー」の画面で行います。「マーカーのカテゴリー」の設定画面で、各マーカーに付与したいカテゴリー名の一覧を作成します。「新宿周辺」の地図でいえば、「新宿周辺のホテル」「新宿周辺のデパート」「新宿周辺の公園」などをカテゴリーに設定します。ここでえは、合計10個のカテゴリーをつくりました。

次に、個々の地図マーカーの設定画面を開き、それぞれのマーカーの所属カテゴリーにチェックを入れます。例として、京王プラザホテルだったら、「新宿周辺のホテル」のカテゴリーにチェックを入れます。

途中は省略しますが、新宿駅周辺のマーカーを増やして、それぞれの所属カテゴリーにチェックを入れて、カテゴリーつきマーカーの地図を作成したのが、次の画像です。絞り込み検索の方法は、チェックボタンでOR方式で検索できるように、「設定」画面で指定しています。プルダウン・メニューの検索にすると、択一型の絞り込みになります。

ポリラインの作成

ここまでは、地図上にマーカーを設定したり、それを検索したりする機能について説明してきました。次は、WP Google Mapsを使って地図上にポリライン（経路、ルート）を描く方法を説明します。ここでは、例として、新宿御苑の庭園を散歩したルート（架空）をポリラインで提示してみたいと思います。

描画の方法は簡単です。地図の左側にあるタブメニューから「ポリライン(polyline)を選び、線の色、不透明度、太さを選び、地図にマウスで道路に沿ってきめ細かくマウスでタップしていくだけです。道が曲がっているところでマウスをクリックしていけば、スムーズな曲線を描くことができます。終点でダブルクリックすれば、ポリラインの描画を終えることができますので、ポリラインの名前をつけて、「ポリラインを追加」ボタンを押せば、このポリラインが保存されます。あとでポリラインを編集することもできますから、ほぼ思い通りのルートマップを作成することができるでしょう。

マップとマーカーのエクスポートとインポート

一度作成したマップやマーカーは、JSON形式にしてインポートしたり、エクスポートしたりすることができます。従って、他のWordPressサイトで作ったマップやマーカーを再利用したり、他のサイトで使ったりすることも自由にできるので、とても便利です。また、GPS機能つきのカメラで撮影した写真をWordPressのサイトで正確な撮影位置つきで表現するといったこともできます。詳しくは、別の記事で取り上げる予定です。

おわりに

いかがでしょうか。HTML、CSS、PHPの知識がなくても、WP Google Maps（有料版）をインストールするだけで、あなたのWordPressページに、これだけリッチなGoogleマップを入れることができるのです。ご自分のWordPressサイトにぜひ思い通りの地図を入れたいとお考えの方は、ぜひこの地図作成プラグインを入れてみてはいかがでしょうか？