Google Mapを埋め込むWordPressプラグイン「Simple Map」の使い方

WorldPressブログにGoogleMap（グーグルマップ）を埋め込めるプラグインとして「Simple Map」があります。スマホ対応にも対応していますので、外出先から閲覧するユーザーがいても安心です。そんなSimple Mapの設定方法から使い方までを解説しておきます。

Simple Mapの設定方法

1：「Simple Map」をインストール＆有効化
管理画面から「Simple Map」で検索して、インストール＆有効化します。

2：記事本文欄に「ショートコード」を記述

記事入力欄に下記のショートコードを記述します。
[map addr=”表示したい住所”]
例：[map addr=”広島県広島市中区中町1-1″]

3：プレビューで確認

ショートコードに記述した住所付近の地図が記事内に設置されますので、プレビューで確認してください。

以上でSimple Mapの設定完了です。めっちゃ簡単ですね。

Simple Mapの使い方とデフォルト埋め込みコードとの違い

これだけで終わると解説記事が寂しいので、カスタマイズ方法とデフォルトのGoogleマップ埋め込みコードとの違いも解説しておきます。地図の幅と高さを指定したい時は下記のように記述します。

例：幅400px、高さ300pxにしたい場合
[map addr=”住所” width=”400px” height=”300px”]
ちなみにデフォルトは「width=”100%” height=”200px”」に設定されています。

地図の倍率の指定は下記のように記述します。
[map addr=”住所” zoom=”18″]
ちなみにデフォルトは「16」に設定されています。

Simple Mapはgoogleマップをショートコードのみで簡単に設置できる便利なWordPressプラグインです。ですが、Googleマップはプラグインを使わなくても、地図右下の「歯車アイコン」→「地図を共有/埋め込む」で埋め込みコードを取得することができます。

ただし、スマホには対応していなくて、地図が画面からはみ出てしまいます。はみ出てしまいますが、同一画面上でピンチイン（2本の指で画面をつまむようにして画面を縮小させる操作）、ピンチアウト（2本の指で画面を広げる操作）ができます。また、PC上から確認する場合は、マウスのホイールを動かして、地図を拡大・縮小することもできます。

一方、「Simple Map」はスマホに対応していますので、画面内に綺麗に収まりますが、同一画面上でピンチの操作ができません。地図を拡大・縮小、移動するには、地図をタップしてグーグルマップのサイトに移動する必要があります。

また、PC画面でSimple Mapで表示させた場合はホイールを動かして拡大縮小はできず、左側のズームイン「＋」、ズームアウト「－」ボタンを使うことになります。