GoogleマップをWordPressのサイトへ簡単に埋め込みできるプラグイン、「Simple Map」を紹介します。幅と高さの指定や、レスポンシブデザインに対応した地図を埋め込みなどができます。
Googleマップの埋め込みが簡単&便利に!Simple Map プラグイン
Googleマップを表示させる方法で紹介しましたが、Googleマップには専用のコードをコピー・貼り付けするだけで地図を埋め込む機能があります。
ただ、この方法には以下の欠点があります。
- 地図をいくつも埋め込むには手間がかかる
- 大きい地図が画面に入りきらない
- 地図が画面スクロールの妨げになる
- 一部の仕様変更について
- 2018年6月18日時点でGoogleマップの動作状況を確認したところ、本記事内で紹介している[欠点② 大きい地図が画面に入りきらない]および[欠点③ 地図が画面スクロールの妨げになる]の問題点については解消されているようです。ただし、利用環境により動作が異なる場合がありますのでご了承ください。
欠点①地図をいくつも埋め込むには手間がかかる
GoogleマップをWordPressのサイトに埋め込むためには、
- 目的の地図を表示させる
- 埋め込みコードをコピーする
- 記事編集画面で貼り付ける
という手順が必要です。1つや2つの地図ならいいですが、たくさんの地図を埋め込む場合、この手順を繰り返すのは面倒です。
欠点②大きい地図が画面に入りきらない
下の地図は、パソコンでの表示時に見やすいようにと、中サイズ用の埋め込みコードを利用したものです。もし、あなたがスマートフォンで縦長の画面でご覧になっていたら、画面からはみ出してしまってはいないでしょうか。
欠点③地図が画面スクロールの妨げになる
もしあなたがマウスを利用しているなら、画面をスクロールしたいときマウスホイールをコロコロと転がしませんか?
ためしに、この位置からマウスホイールを下向きに転がしてみてください。マップ上にカーソルが来ると、地図の縮尺が変わるばかりでうまくスクロールできないのではないでしょうか。
ここまで、Googleマップ埋め込み機能の欠点を見てきましたが、これらをすべて解決するのが「Simple Map」プラグインです。
Simple Map プラグインの使い方
ここからは、Simple Map プラグインの導入方法と基本的な使い方を紹介します。
Simple Map プラグインのインストール・有効化
Simple Map プラグインはWordPress プラグインディレクトリに登録されています。管理画面の[プラグイン]>[新規追加]で、「Simple Map」というキーワードで検索してインストール・有効化することができます。

Google Maps APIキーの設定
Simple Map プラグインを有効化すると、管理画面上部につぎのメッセージが表示されます。[設定ページ]のリンクをクリックします。

設定ページにある解説を参考にしてAPIキーを取得し、[Set API Key]に入力して、します。 をクリック

下のメッセージが表示されたら、Google Maps APIキーの設定が完了です。

Simple Map プラグインの基本的な使い方
Simple Map プラグインを利用して地図を表示させるには、ショートコードを使います。ショートコードとは、短いコードを記述して特定の動作を実現する機能です。
以下に紹介するショートコードを、WordPressの投稿(または固定ページ)の編集画面で入力するだけで、目的地の地図を表示できます。
- ショートコードに使用する[ ]について
- これから紹介するショートコードのサンプル(末尾に※が付いたコード)には、都合上、全角の[ ]を使用していますが、実際に記述する際は半角の[ ]を使用してください。
基本のショートコード
基本となるショートコードは、次のように記述します。
- [map addr=”住所・所在地、施設名など”]
または、
- [map]住所・所在地、施設名など[/map]
例として、東京駅のマップを記事内に挿入してみましょう。ショートコード
[map]東京駅[/map]
を編集画面で入力し、プレビュー画面で確認してみます。

きちんと、目的地の地図が表示されました。

上記ショートコードの「東京駅」の部分を変更するだけでその場所の地図を表示できるので、わざわざGoogleマップにアクセスして埋め込みコードをコピーするという手間を省くことができます。
幅と高さを指定する
Simple Map プラグインの初期値では、地図の幅が100%、高さが200pxに指定されています。これらの値を、任意のサイズに変更することができます。たとえば、幅を400px、高さを300pxに変更するには、次のように記述します。
- [map addr=”東京駅” width=”400px” height=”300px”][/map]
または、
- [map width=”400px” height=”300px”]東京駅[/map]
あなたがWordPressで利用しているテーマがレスポンシブデザインに対応しているなら、幅の単位を[px]ではなく[%]で指定するといいでしょう。スマホやタブレットなど、さまざまな端末で適切なサイズの地図を表示することができます。
地図を画像化する
Simple Map プラグインを利用して表示させた地図は、マップ上でマウスホイールを転がしても縮尺は変わりません。下の地図で試してみてください。
また、Simple Map プラグインでは、横幅が320px以下の端末で開いたとき、地図を画像化(Google Static Maps)して表示します。この横幅の値を、任意のサイズに変更することができます。
たとえば、横幅768px以下のときに地図を画像化するには、次のように記述します。
- [map addr=”東京駅” breakpoint=”768px”][/map]
または、
- [map breakpoint=”768px”]東京駅[/map]
ここまでご紹介したSimple Map プラグインの機能で、冒頭の「Googleマップ埋め込み機能の欠点」をすべてカバーできていることにお気づきでしょうか?他にも便利な機能があります。
倍率を変更する
初期値の倍率は[16]ですが、任意の値に変更できます。たとえば、[20]に変更するには、次のように記述します。
- [map addr=”東京駅” zoom=”20″][/map]
または、
- [map zoom=”20″]東京駅[/map]
吹き出しを表示する
目的地の上部に吹き出しを表示し、メッセージを記述することができます。次の例を参考にしてください。
- [map addr=”東京駅” infowindow=”open”]最寄りの駅はこちらです[/map]
道順案内付きの地図は表示できない
Googleマップには、出発地から目的地までの道順(ルート)を表示する機能があります。Simple Map プラグインでは、道順案内付き地図の埋め込みには対応していません(2016年9月現在)。

ルート案内付きの地図を埋め込むには、Googleマップを表示させる方法で紹介した方法を参考にしてください。