この記事ではWordPressにGoogleMapを埋め込み、でスマホ(レスポンシブ)対応表示させる2つの方法について解説します。

Googleマップは、専用コードを取得し直接埋め込む方法とプラグインを活用する2つの方法から埋め込む事が出来ます。
順番に解説してゆきますので、やりやすい方で導入してみてください!

お店に来てほしい、イベントに参加してほしい、セミナーに参加してほしい等、場所の告知をしたい場合にお役立て頂ければと思います。
特に現地に足を運んでもらいたい場合的確なアクセス方法を提示してスムーズにたどり着ける方法を伝えることは超重要な事ですよね。

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

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

スポンサーリンク

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

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

 

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

次に、画面右側にある詳細情報のなかにある、図のように『共有』をクリックします。

gmap01

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

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

gmap02

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

↓これが実際に埋め込んだGoogleマップです!

プラグインを使ったGoogleマップの埋め込む方法

次に、プラグインで対応させる方法です。
プラグインは複数ありますが、その中で特に使いやすい2種類をご紹介します。

尚、プラグインを使う場合は『Google Maps APIキー』の取得が事前に必要となります。

プラグインを使う為に必要な『Google Maps APIキー』の取得方法

『Google Maps APIキー』を取得す為には、以下公式サイトにまずアクセスをしてください。

Google Maps API公式サイトへ

下図の様に公式サイトが表示されますので、画面右上の『キーの取得』をクリックして下さい。

GoogleマップのAPIサイトのサムネイル

移行画面の指示に従って操作をすれば、下図の様に『Google Maps APIキー』が取得できますので、コピーしておきましょう。

GoogleマップのAPIキー取得完了画面
尚、『Google Maps APIキー』を忘れてしまった場合は、再び画面右上の『APIキーの取得』をクリックし、作成したプランをクリックすると確認が出来ますよ!

プラグイン Simple Map の使い方

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

simplemapプラグイン検索結果

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

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

 

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

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

 

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

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

03

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

次に、『設定』⇒『simple map』をクリックし、『Google Maps APIキー』を入力し、『変更を保存』してください。

simplemapのAPIキー入力個所

プラグイン側の設定は以上となります。

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

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

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

もしくは

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

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

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

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

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

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

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

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

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

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

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

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

02

しかも、タップすると、Googleマップが別ウィンドウで立ち上がります!
(アクセスされる方にとって、こういったさりげない機能って、無茶嬉しいんですよ。)

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

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

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

 

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

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

 

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

 

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

 

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

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

 

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

公式サイトはこちら