ここではGoogleMapを埋め込み、WordPressでスマホ対応表示させる方法について解説します。

 

お店に来てほしい、イベントに参加してほしい、セミナーに参加してほしい等、場所の告知をしたい場合にお役立て頂ければと思います。

初心者の方でも簡単にできる方法を二通り解説しますので、好きなほうを使ってみてくださいね!

スポンサーリンク

GoogleMapを有効活用しよう

先にもお話しましたが、スマホからのアクセスは無視できません。

特に現地に足を運んでもらいたい場合的確なアクセス方法を提示してスムーズにたどり着ける方法を伝えることは超重要な事ですよね。

sagasi

そんな時に役立つのが、Googleマップの埋め込みです。

ズーム対応もできますし、比較的制度が高い上に無料なので僕はお勧めしています。

 

方法は2通りあり、プラグインを活用する方法と専用コードを取得し埋め込む方法です。
順番に解説してゆきますので、やりやすい方で導入してみてください!

プラグインでレスポンシブ対応にさせるなら、【Simple Map】を活用しましょう。

まず、プラグインで対応させる方法です。
僕は【Simple Map】というGoogleマップをレスポンシブ対応させるプラグインをお勧めしています。

 

このプラグインをインストールにするには【ダッシュボード】【プラグイン】⇒新規追加で表示される画面の検索ボックスで【Simple Map】と検索すると出てきます。

 

尚、プラグインのインストール方法についてはこちらで解説しています。

機能拡張!簡単なプラグインのインストール方法

 

【Simple Mapプラグインが表示されたら、【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。

これだけで、インストールが完了します。

 

尚、ダウンロードしてインストールをする場合は、下記のアドレスからダウンロードできます。

https://wordpress.org/plugins/simple-map/

03

この場合も有効化を忘れずに行って下さい。

利用するための準備はこれで完了です。

超シンプルなSimple Mapの使い方!

地図の表示のさせ方は、ページに以下のコードをいずれかを入力すればいいだけです!

[map addr=”ここにマップ表示させたい住所”]

もしくは

[map]ここにマップ表示させたい住所[/map]

住所は東京都~~という風に、都道府県からでOKです。

(国からでなくて大丈夫と言う事です。)
住所は、2丁目2-2でも、2-2-2どちらでも認識するようです。

初期(デフォルト)値と変更方法

初期状態からの表示を変えたい場合は、

mapの後に、半角のスペースを入れて、属性=””で指定すればよいです。

 

例えば、初期値よりもう少しズームしたいとすると・・・
[map zoom=”18″ addr=”ここにマップ表示させたい住所”]もしくは

[map zoom=”18″]ここにマップ表示させたい住所[/map][

という具合に指定すれば、ズーム率が上がります。

 

初期(デフォルト)値は以下の通りなので、変更する際の参考にされてください。

属性デフォルト値フィルターフック
width100%simplemap_default_width
height200pxsimplemap_default_height
zoom16simplemap_default_zoom
breakpoint480simplemap_default_breakpoint

 

スマホ表示をさせてみると、この通り!

02

しかも、タップすると、Googleマップが別ウィンドウで立ち上がります!

アクセスされる方にとって、こういったさりげない機能って、無茶嬉しいんですよ。

 

そこからアプリの立ち上げもできますからね。

ナビとしても十分に活用して頂けるって事です。

GoogleMapのコードを取得し埋め込む方法

次に、GoogleMapのコードを取得してブログの記事内に埋め込む方法について解説します。

 

まずは、GoogleMapを開き掲載させたい住所を検索します。

次に、図のように『共有』をクリックします。

gmap01

そうするとこの様に表示されますので、『地図を埋め込む』をクリックし、埋め込み用の専用コードが発行されますので、コピーしてください。

マップサイズは専用コード左の『中』のところで操作ができます。

gmap02

投稿画面で『テキストモード』に切り替え、このコードをペーストすればOKです!

まとめ 読者さんは情報を求めているので、いかに分かりやすくするかが大事

いかがでしたでしょうか。

イベントや会社の情報を載せるとき、お店や医療機関でも役に立つのではないでしょうか。

 

今は情報化社会とは入れているものの、情報に埋もれているのが実情だと僕は捉えています。

それは、情報発信者のみならず、情報をキャッチする側にも同じことが言えるわけです。

 

どれも似ていて、しかも価値も同じに感じられてしまわない為にも、他社(者)との差別化は絶対的に必要です。

 

その一つが、いかに相手に伝わりやすいかという要素がとても大きいと思いませんか?

 

こういった細かいところが、ユーザーからしてみると、積み重なる差別化に繋がると僕は考えていますので

ひとつ、ご参考になれば幸いと思います。

 

尚、このプラグインは製作者さんのサイトを参考に僕なりに噛み砕いて書かせていただきました。

公式サイトはこちら