Contents
【WordPress】ワードプレスでGoogleマップの地図を表示させる方法 こんにちは。フミです。
WordPressでGoogleマップの地図を表示させる方法をご紹介します。
ワードプレスでGoogleマップの地図を表示させる方法
ワードプレスでGoogleマップの地図を表示させる方法は、地図のHTMLコードを挿入する方法とプラグインを使用する方法の2種類があります。
どちらでも同じことができますので、自分に合ったお好きな方法をお試しください。
地図のHTMLコードを挿入する方法
Googleマップから、地図表示用のHTMLコードをコピーして表示する方法です。
地図表示用のHTMLコードをコピー
先ずはGoogleマップで貼り付けたい場所を検索します。
検索出来たら、「メニュー」⇒「共有」を押します。
共有を押すとポップアップが表示されますので、「地図を埋め込む」⇒「HTMLをコピー」を押してください。
表示サイズは標準の大中小の3種類の他に自分でカスタムし調整することができます。
今回はデフォルトの中を使用しています。
WorddPressに反映する
WordPressをテキストモードで開き、そのまま貼り付けると下記のように表示されます。
これで「地図のHTMLコードを挿入する方法」する方法は完成です。
殆どコピー&ペーストだけなので、非常に簡単です。
プラグインを使用する方法
地図をたくさん埋め込む必要がある場合は、プラグインを使うと効率的に挿入できます。
プラグインをインストール
いくつか種類がありますが、日本人が作成した「simple map」というプラグインを使用すると良いでしょう。
プラグインの使用方法
WordPressをテキストモードで開き、下記のように住所を記述するだけで表示されます。
[map addr="東京都墨田区押上１-１−２"]
また、サイズを変更したい場合は、「width」、「height」を指定すれば、変更できます。
[map addr="東京都墨田区押上１-１−２" width="600px" height="450px"]
住所が分かっていて、1記事にいくつも地図を表示させたい場合にプラグインを使用すると簡単です。
まとめ
ワードプレスでGoogleマップの地図を表示させる2種類の方法をご紹介しました。
・地図のHTMLコードを挿入する方法
・プラグインを使用する方法
場所を紹介したい場合は、ぜひ活用してください！
