この記事ではWordPressにGoogleMapを埋め込み、でスマホ（レスポンシブ）対応表示させる2つの方法について解説します。
Googleマップは、専用コードを取得し直接埋め込む方法とプラグインを活用する2つの方法から埋め込む事が出来ます。
順番に解説してゆきますので、やりやすい方で導入してみてください！
お店に来てほしい、イベントに参加してほしい、セミナーに参加してほしい等、場所の告知をしたい場合にお役立て頂ければと思います。
特に現地に足を運んでもらいたい場合、的確なアクセス方法を提示してスムーズにたどり着ける方法を伝えることは超重要な事ですよね。
そんな時に役立つのが、Googleマップの埋め込みです。
ズーム対応もできますし、比較的制度が高い上に無料なので僕はお勧めしています。
目次
GoogleMapのコードを取得して直接埋め込む方法
まずは、GoogleMapのコードを取得してブログの記事内に埋め込む方法について解説します。
まずは、GoogleMapを開き掲載させたい住所を検索します。
次に、画面右側にある詳細情報のなかにある、図のように『共有』をクリックします。
そうするとこの様に表示されますので、『地図を埋め込む』をクリックし、埋め込み用の専用コードが発行されますので、コピーしてください。
マップサイズは専用コード左の『中』のところで操作ができます。
WordPressの投稿画面で『テキストモード』に切り替え、このコードをペーストすればOKです！
↓これが実際に埋め込んだGoogleマップです！
そこで、以下の手順でレスポンシブ対応させて、画面サイズに常に最適化された表示がされるようにしましょう！
GoogoleMapのコードをレスポンシブ対応させる方法
Googoleマップのコードをレスポンシブ対応させるためには…
- CSSに追記をする。
- DIVタグでGoogoleマップの埋め込みコードを囲い、CSSが機能するようにする。
この2つが必要となります。
では、手順を追って説明しますね。
まずは、CSSに「これから指定するGoogleマップの埋め込みコードをレスポンシブ対応しますよ。」という命令を追記する必要があります。
これには2通りあり、
1つ目は、テーマにあるCSS追加の機能を使う（テーマにより無い場合があります）
2つ目は、プラグイン『Simple Custom CSS and JS』を使い、『Add Custom CSS』に追記する。
いずれの場合も、以下のコードをコピーし、そのまま追記（ペースト）してください。
これでステップ1は終わりです。
次に、このCSSが機能するように、埋め込んだGoogleマップのコードの前後に以下のコードを投稿編集画面の「テキストモード」で追記します。
プラグインを使ったGoogleマップの埋め込む方法
次に、プラグインで対応させる方法です。
プラグインは複数ありますが、その中で特に使いやすい2種類をご紹介します。
尚、プラグインを使う場合は『Google Maps APIキー』の取得が事前に必要となります。
プラグインを使う為に必要な『Google Maps APIキー』の取得方法
『Google Maps APIキー』を取得す為には、以下公式サイトにまずアクセスをしてください。
下図の様に公式サイトが表示されますので、画面右上の『キーの取得』をクリックして下さい。
移行画面の指示に従って操作をすれば、下図の様に『Google Maps APIキー』が取得できますので、コピーしておきましょう。
プラグイン Simple Map の使い方
このプラグインをインストールにするには【ダッシュボード】⇒【プラグイン】⇒新規追加で表示される画面の検索ボックスで【Simple Map】と検索すると出てきます。
尚、プラグインのインストール方法が分からない方は、こちらで解説しています。
【Simple Mapプラグインが表示されたら、【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。
これだけで、インストールが完了します。
尚、ダウンロードしてインストールをする場合は、下記のアドレスからダウンロードできます。
⇒https://wordpress.org/plugins/simple-map/
この場合も有効化を忘れずに行って下さい。
次に、『設定』⇒『simple map』をクリックし、『Google Maps APIキー』を入力し、『変更を保存』してください。
プラグイン側の設定は以上となります。
超シンプルなSimple Mapの使い方！
地図の表示のさせ方は、ページに以下のコードをいずれかを入力すればいいだけです！
[map addr="ここにマップ表示させたい住所"]
もしくは
[map]ここにマップ表示させたい住所[/map]
住所は東京都～～という風に、都道府県からでOKです。
（国からでなくて大丈夫と言う事です。）
住所は、2丁目2-2でも、2-2-2どちらでも認識するようです。
初期(デフォルト)値と変更方法
初期状態からの表示を変えたい場合は、
mapの後に、半角のスペースを入れて、属性=""で指定すればOKです。
例えば、初期値よりもう少しズームしたいとすると・・・
[map zoom="18" addr="ここにマップ表示させたい住所"]
もしくは
[map zoom="18"]ここにマップ表示させたい住所[/map]
という具合に指定すれば、ズーム率が上がります。
初期(デフォルト)値は以下の通りなので、変更する際の参考にされてください。
| 属性 | デフォルト値 | フィルターフック |
|---|---|---|
| width | 100% | simplemap_default_width |
| height | 200px | simplemap_default_height |
| zoom | 16 | simplemap_default_zoom |
| breakpoint | 480 | simplemap_default_breakpoint |
スマホ表示をさせてみると、この通り！
しかも、タップすると、Googleマップが別ウィンドウで立ち上がります！
（アクセスされる方にとって、こういったさりげない機能って、無茶嬉しいんですよ。）
まとめ 読者さんは情報を求めているので、いかに分かりやすくするかが大事
いかがでしたでしょうか。
イベントや会社の情報を載せるとき、お店や医療機関でも役に立つのではないでしょうか。
今は情報化社会とは入れているものの、情報に埋もれているのが実情だと僕は捉えています。
それは、情報発信者のみならず、情報をキャッチする側にも同じことが言えるわけです。
どれも似ていて、しかも価値も同じに感じられてしまわない為にも、他社(者)との差別化は絶対的に必要です。
その一つが、いかに相手に伝わりやすいかという要素がとても大きいと思いませんか？
こういった細かいところが、ユーザーからしてみると、積み重なる差別化に繋がると僕は考えていますので
ひとつ、ご参考になれば幸いと思います。
