WordPressにGoogleマップを表示させよう！便利なプラグイン6選

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

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

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

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

1.TCD Google Maps

インストールはこちら

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

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

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

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

2.WP Google Maps

インストールはこちら

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

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

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

3.Comprehensive Google Map Plugin

インストールはこちら

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

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

4. Google Maps Widget

インストールはこちら

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

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

5.MapPress Easy Google Maps

インストールはこちら

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

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

6.Maps Builder

インストールはこちら

こちらも、マップ上に テキスト メッセージを掲載することができる プラグイン です。
テキスト メッセージは 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.

まず、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.

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

まとめ

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

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