WordPressでつくったWebサイトのページや記事にGoogleマップを埋め込む方法
会社やお店のウェブサイトをつくるときに、「アクセスマップ」としてGoogleマップをページ内に埋め込むことがよくあります。今回は、WordPressでGoogleマップを埋め込む二つの方法をメモします。
プラグインを使う
記事やページ内にGoogleマップを埋め込むためのWordPressプラグインはいろいろあるのですが、わたしはこのプラグインをよく使っています。
Simple Map
あれこれ設定しなくてもすぐに使えるシンプルなところが好きです。
使いかた
まず、プラグインをインストールします。
WordPress管理画面の［プラグイン］＞「新規追加」で「Simple Map」を検索して、インストールできます。
プラグインを有効化したら、特に設定は必要ありません。ページ・記事内の地図を埋め込みたい場所に、下記のように住所を書き込んだショートコードを入れればOKです。
[[map]東京都武蔵野市御殿山1－18－31[/map]]
または
[[map addr="東京都武蔵野市御殿山1－18－31"][/map]]
すると、このように地図が入ります。
[map]東京都武蔵野市御殿山1－18－31[/map]
地図に表示する場所を緯度経度で指定したり、地図の幅・高さの指定、倍率の指定などもショートコードで簡単にできます。くわしくは、開発者さまサイトをご覧ください。
http://firegoby.jp/wp/simple-map
iframeで埋め込む
また、プラグインを使わなくても、Googleマップをiframeで埋め込む方法があります。
方法
Googleマップを開いて、住所や場所を入力して地図に表示します。
https://www.google.co.jp/maps/
その地点の地図が表示されたら、右下の方にある歯車アイコンをクリックして、「地図を共有/埋め込む」をクリック。
開いた画面で「地図を埋め込む」を選ぶとソースが表示されるので、それをコピーして、記事やページ内に貼りつければOKです。
たとえば、このようなソースが表示されるので、
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.951503895516!2d139.57980400000002!3d35.70281099999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee47f6226cc3%3A0x34e6b69989d52a4e!2z5ZCJ56Wl5a-66aeF77yI5p2x5Lqs77yJ!5e0!3m2!1sja!2sjp!4v1416829811966" width="600" height="450" frameborder="0" style="border:0"></iframe>これを貼り付けると、こんなかんじで地図が表示されます。
くわしくは、Googleのヘルプが参考になります。
地図のカスタマイズ
ちなみに、Googleマップでルート検索をして、それを表示した地図も上記と同じ方法で埋め込めます。たとえば、こんなかんじで。
また、キーワード検索の結果の地図も同様に、こんなかんじで埋め込めます。（例：「新宿駅付近のラーメン」）
もし、これらの地図を表示するのにGoogleマップのAPIを直接たたきたいといった場合は、こちらの記事が参考になりそうです。
http://hyper-text.org/archives/2014/03/new_google_maps_embed_api.shtml
まとめ
iframeを避けたいとかhtmlの知識をお持ちでないクライアントに運用や更新をしてもらう場合には「Simple Map」プラグインを、経路とか地域ごとのお店のマップなどを表示したいときはGoogleマップのiframe埋め込みを使うというように、使い分けするのもいいですね。
ちなみに、「Simple Map」プラグインでもGoogleマップのiframe埋め込みでも、レスポンシブデザインのサイト内でスマートフォンなどで地図を表示すると、きれいに縮小されて表示されます。ちがいとしては、「Simple Map」はスマートフォンなど画面幅が小さいときには地図を固定表示できるので、スクロールするのにじゃまにならないように作られています。Googleマップ埋め込みのほうは地図をぐりぐりとスクロールも拡大縮小もできるので、場合やお好みでどちらかを選ぶのもよさそうです。
経路や検索結果の地図が表示できるのは今回はじめて知ったのですが、食べ歩きや散歩といったテーマのサイトやブログととても相性がよさそうなので、機会があればもっといろいろ試してみたいなぁと思いました。
