WordPressを使用して作成したホームページを公開する際、特に実店舗をお持ちの場合や企業情報を掲載したい場合など、場所を呈示しなければならないケースがあります。
住所だけでも構わないのですが、あわせてマップも掲載しておくと、ホームページを訪問したユーザーにより親切なページを作成することができます。

今回は、WordPressで作成したホームページにGoogleマップを表示するためのプラグイン選をご紹介します。
それぞれに特長があり、表示できる内容が異なりますので、自社ホームページの内容やどのようなマップを表示したいのかにあわせて、本記事を参考にプラグインをインストールしてみてはいかがでしょうか。

2017年7月19日 本文内に一部誤りがありましたので修正いたしました。

WordPressでGoogleマップを表示させるためのプラグイン6選

1.TCD Google Maps

TCD_Google_Maps.png
インストールはこちら

こちらは、使用できるデザインテーマが非常に豊富なプラグインです。
日本製のプラグインのため、管理画面が日本語表記されており英語が苦手な方でも難なく使用することができます。

ショートコードを取得すれば(ショートコードの取得方法については、記事下部を参照ください)、記事中に簡単にマップを表示することができるため、ホームページのトップページだけではなく記事内でもマップを表示したいという場合に非常に便利です。

さらに、縦横サイズやマップのズームを調整する機能も搭載されているため、ホームページを訪問したユーザーが見やすいマップを表示することができます。

なお、このプラグインの使用にあたっては、APIキーの取得が必須となります。
APIキーの取得方法については、記事下部にてご紹介していますので参考にしてください。

2.WP Google Maps

WP_Google_Maps.png
インストールはこちら

こちらは、Googleマップを表示するためのプラグインの中でも比較的人気の高いプラグインです。
使用時にトラブルがおきるなど分からないことがあった場合に、インターネット上で検索をするとさまざまな情報を得ることができるため、今回ご紹介するプラグインの中でも特にWordPress初心者の方にオススメです。

1記事につき表示できるマップの数は1つまでですが、1つのマップ上に複数のマーカーを落とすことができます。
こちらのプラグインもショートコードを取得すると、投稿ページから手軽にマップの追加が可能です。

有料のアドオンを使用すればさらに使用可能な機能を拡張することが可能で、デフォルトのマーカーアイコンを変更したり、吹き出しのテキストの変更や画像・リンクの挿入、マーカーごとのアイコンの変更などを行うことができます。
無料版を使用してみて、さらに機能を拡張したい場合は、有料のアドオンの使用もオススメです。

3.Comprehensive Google Map Plugin

Comprehensive_Google_Map_Plugin.png
インストールはこちら

こちらは、ウィジェットとしてGoogleマップを追加することができるプラグインです。
マーカーの種類が変更可能なだけではなく、何箇所も打つことができたりマーカークリック時の情報を個別に編集できたりと、汎用性が比較的高い点もオススメ。
こちらのプラグインもショートコードを使用すれば投稿ページから簡単にマップを追加することもできます。

管理画面は英語で表記されていますが、基本的な英単語ばかりが使用されているので、英語が苦手な方でもそれほど抵抗を感じずに使用することができて安心です。

4.Google Maps Widget

Google_Maps_Widget.png
インストールはこちら

こちらも、ウィジェットとしてGoogleマップを追加することができるプラグインです。
先にご紹介した「Comprehensive Google Map Plugin」と異なり、マップをクリックすると拡大表示される点が大きなポイントです。
ズームレベルはもちろん、マップサイズそのもののカスタマイズも可能です。

オリジナルのマーカーが10色提供されていますので、ホームページデザインのトンマナに合わせて色を選択することもできます。
比較的カスタマイズ性が高いプラグインですので、デフォルトのマップではつまらない、競合他社とは少し異なるホームページに仕上げたいという方にオススメです。

5.MapPress Easy Google Maps

MapPress_Easy_Google_Maps.png
インストールはこちら

こちらは、マップにテキストメッセージを添付することができるプラグインです。
複数地点を表示することも可能な上に、航空写真やストリートビューの表示、A-B間ルート案内も行うことができます。

管理画面が日本語表記のため英語に抵抗がある方でも難なく作業できるほか、特カスタマイズなどが必要ない場合にはプラグインをインストールして有効化するだけで設定の9割は完了するという、作業工程の少なさもポイントです。
少しでも簡単・手軽にホームページ上にマップを表示したい、という方にはぜひ試していただきたいプラグインです。

6.Maps Builder

Maps_Builder.png
インストールはこちら

こちらも、マップ上にテキストメッセージを掲載することができるプラグインです。
テキストメッセージはHTMLタグに対応しているため、フォントサイズやカラーをカスタマイズしてホームページのトンマナに合わせたマップを作成することができます。
マップのサイズは変更可能で、さらにショートコードを取得すると設定作業も簡単に行えます。

なお、こちらのプラグインを使用する際はAPIキーの取得が必須となります。
APIキーの取得方法については、記事下部にてご紹介していますので参考にしてください。

ショートコードの取得方法

先にご紹介したプラグインでは、住所とマップサイズを指定するためのショートコードが必要となるものもあります。
ショートコードの取得は非常に簡単ですので、以下のコードを編集して作成してください。

[map addr=“東京都千代田区一番町17-6” width=“600px” height=“450px”]

「東京都墨田区押上1-1-2」は、ホームページ上で表示させたい住所を指定する箇所です。
実店舗や自社の住所に書き換えてください。
「width=“600px” height=“450px”」は、表示するマップサイズを指定する箇所です。
ただし、使用しているテーマがレスポンシブデザイン対応のものである場合は「px(ピクセル)」ではなく「%」で指定することをオススメします。

APIの取得

先にご紹介したプラグインでは、GoogleマップのAPIを取得が必須のものもあります。
APIキーを登録してプラグインを利用すると、マップの利用状況の確認も可能になりますので、APIが必須となるプラグインを使用する場合、またはマップの利用状況を確認したい場合は、以下の手順に従って取得してください。

step1.

1.png
まず、Google Maps APIs for Webへアクセスします。
以下の5種類のAPIが表示されていますので、使用したいものを選択してクリックしてください。

・Google Maps JavaScript API：マップのカスタマイズが可能
・Google Maps Embed API：コード記述や割当の制限なし
・Google Street View Image API：実際の画像とパノラマ画像の使用が可能
・Google Static Maps API：動的ページの読み込みを使用せずにマップの埋め込みが可能
・Google Places API JavaScript ライブラリ：多くの場所の最新情報が利用可能

step2.

2.png
続いてチュートリアルが表示されますので、必要な場合は閲覧します。
どのAPIを選択してもチュートリアルが表示され、そのままAPIの取得方法を導いてくれますので、表示されている手順に従って情報を入力し、進めてください。

まとめ

プラグインを使用せずにホームページにそのままマップを埋め込むことも可能です。
しかし埋め込み作業は非常に手間がかかるほか、マップが画面スクロールの邪魔になってしまったり大きなマップは埋め込むことができなかったりと、ホームページの作成者側も訪問するユーザー側も不便に感じてしまうケースは少なくありません。

今回ご紹介したプラグインを使用すれば、エンジニアがいないチームでホームページを作成する場合はもちろん、WordPress初心者の方でも簡単にホームページ上にマップを表示することができます。
プラグインを使用して、手間なく整ったホームページ作成を行いましょう。