WordPressテーマ「メシオプレス」ブログ

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で表示させた場合はホイールを動かして拡大縮小はできず、左側のズームイン「+」、ズームアウト「-」ボタンを使うことになります。

となると、通常はプラグインを使うよりも、デフォルトの埋め込みコードを使ったほうが良いのかなという気がします。「画面がはみ出てるのが気になる」「固定表示させたい」という場合は「Simple Map」を使うと良いと思います。

あとがき

エステサロン、整体院、歯科医院などの士業系、実店舗向けのサイトで、アクセス案内として地図を表示させたい場合は「Googleマップ」は重宝すると思います。一昔前は自分で地図を描かないといけなかったのですが、便利な時代になったものです。

この記事を書いた人

めしお
めしお メシオプレス販売者

めしおさんのめしおさんによるめしおさんのためのWordPressテーマ「メシオプレス」を有料でおすそ分けしています。

コメント

この記事へのコメントはありません。

コメントする


※メールアドレスは公開されません。

オリジナル有料WordPressテーマ好評発売中

メシオプレス02 メシオプレス03