Simple Map（Googleマップ埋め込みプラグイン）

GoogleマップをWordPressのサイトへ簡単に埋め込みできるプラグイン、「Simple Map」を紹介します。幅と高さの指定や、レスポンシブデザインに対応した地図を埋め込みなどができます。

Googleマップの埋め込みが簡単＆便利に！Simple Map プラグイン

Googleマップを表示させる方法で紹介しましたが、Googleマップには専用のコードをコピー・貼り付けするだけで地図を埋め込む機能があります。

ただ、この方法には以下の欠点があります。

1. 地図をいくつも埋め込むには手間がかかる
2. 大きい地図が画面に入りきらない
3. 地図が画面スクロールの妨げになる

欠点①地図をいくつも埋め込むには手間がかかる

GoogleマップをWordPressのサイトに埋め込むためには、

1. 目的の地図を表示させる
2. 埋め込みコードをコピーする
3. 記事編集画面で貼り付ける

という手順が必要です。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マップを表示させる方法で紹介した方法を参考にしてください。