WordPressでつくったWebサイトのページや記事にGoogleマップを埋め込む方法

会社やお店のウェブサイトをつくるときに、「アクセスマップ」としてGoogleマップをページ内に埋め込むことがよくあります。今回は、WordPressでGoogleマップを埋め込む二つの方法をメモします。

プラグインを使う

記事やページ内にGoogleマップを埋め込むためのWordPressプラグインはいろいろあるのですが、わたしはこのプラグインをよく使っています。

Simple Map

[browser-shot url=”https://wordpress.org/plugins/simple-map/” width=”610px”]

[icon-box icon=arrow-right-2 size=16 color=gray width=full]WordPressプラグインページ:WordPress › Simple Map « WordPress Plugins[/icon-box][clear]

あれこれ設定しなくてもすぐに使えるシンプルなところが好きです。

使いかた

まず、プラグインをインストールします。
WordPress管理画面の[プラグイン]>「新規追加」で「Simple Map」を検索して、インストールできます。

プラグインを有効化したら、特に設定は必要ありません。ページ・記事内の地図を埋め込みたい場所に、下記のように住所を書き込んだショートコードを入れればOKです。

[code]

東京都武蔵野市御殿山1-18-31
[/code]

または

[code]

東京都武蔵野市御殿山1-18-31
[/code]

すると、このように地図が入ります。

東京都武蔵野市御殿山1-18-31

 

地図に表示する場所を緯度経度で指定したり、地図の幅・高さの指定、倍率の指定などもショートコードで簡単にできます。くわしくは、開発者さまサイトをご覧ください。
 

[icon-box icon=arrow-right-2 size=16 color=gray width=full]開発者さまサイトのページ:Simple Map – 超簡単&スマフォ対応のGoogle Map | firegoby[/icon-box][clear]

iframeで埋め込む

また、プラグインを使わなくても、Googleマップをiframeで埋め込む方法があります。

方法

Googleマップを開いて、住所や場所を入力して地図に表示します。
[icon-box icon=arrow-right-2 size=16 color=gray width=full]Google マップ[/icon-box][clear]

WordPressでつくったWebサイトのページや記事にGoogleマップを埋め込む方法

その地点の地図が表示されたら、右下の方にある歯車アイコンをクリックして、「地図を共有/埋め込む」をクリック。

開いた画面で「地図を埋め込む」を選ぶとソースが表示されるので、それをコピーして、記事やページ内に貼りつければOKです。

たとえば、このようなソースが表示されるので、
[code]<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>
[/code]

これを貼り付けると、こんなかんじで地図が表示されます。

地図のサイズは、小・中・大・カスタムサイズからお好みのものを選べます。(ちなみに上の地図は「中」サイズ)

また、縮尺は、歯車アイコンを押す前に表示していた地図の縮尺が反映されるようです。たとえば大きくするとこんなかんじに。

くわしくは、Googleのヘルプが参考になります。
[icon-box icon=arrow-right-2 size=16 color=gray width=full]地図を埋め込む – マップ ヘルプ[/icon-box][clear]

地図のカスタマイズ

ちなみに、Googleマップでルート検索をして、それを表示した地図も上記と同じ方法で埋め込めます。たとえば、こんなかんじで。

また、キーワード検索の結果の地図も同様に、こんなかんじで埋め込めます。(例:「新宿駅付近のラーメン」)

もし、これらの地図を表示するのにGoogleマップのAPIを直接たたきたいといった場合は、こちらの記事が参考になりそうです。

[icon-box icon=arrow-right-2 size=16 color=gray width=full]新しい Google Maps Embed API が公開、埋め込み地図のカスタマイズが簡単に | WWW WATCH[/icon-box][clear]

まとめ

iframeを避けたいとかhtmlの知識をお持ちでないクライアントに運用や更新をしてもらう場合には「Simple Map」プラグインを、経路とか地域ごとのお店のマップなどを表示したいときはGoogleマップのiframe埋め込みを使うというように、使い分けするのもいいですね。

ちなみに、「Simple Map」プラグインでもGoogleマップのiframe埋め込みでも、レスポンシブデザインのサイト内でスマートフォンなどで地図を表示すると、きれいに縮小されて表示されます。ちがいとしては、「Simple Map」はスマートフォンなど画面幅が小さいときには地図を固定表示できるので、スクロールするのにじゃまにならないように作られています。Googleマップ埋め込みのほうは地図をぐりぐりとスクロールも拡大縮小もできるので、場合やお好みでどちらかを選ぶのもよさそうです。

経路や検索結果の地図が表示できるのは今回はじめて知ったのですが、食べ歩きや散歩といったテーマのサイトやブログととても相性がよさそうなので、機会があればもっといろいろ試してみたいなぁと思いました。