「地図を表示する」タグアーカイブ

WordPressにGoogleMapを追加する


Webサイトに自社や店舗の所在地など地図を載せたい場合があります。というか普通にあります。通常はGoogleMapやYahoo!地図を使用するのですが、WordPressではプラグインを使用して簡単に地図を追加できます。

今回は「Simple Map」プラグインを使用します。

まずは「プラグイン」->「新規追加」より、「Simple Map」をインストールします。

WordPressのSimpleMapプラグイン

「Simple Map」はインストールして有効化するだけですぐに利用できます。

使用方法は簡単です。投稿や固定ページに以下のショートコードを入力するだけです。

※”住所”には住所を設定してください。

[map addr="住所"]

または、

[map]住所[/map]

オプションについては後ほど説明しますが、弊社の場合は以下のように設定しています。

周辺地図
[map addr="大阪府大阪市西区北堀江2丁目4-11" height="400px"]ネクステージ・サービス株式会社[/map] 地下鉄長堀鶴見緑地線 西大橋駅 徒歩5分

すると以下のように表示されます。マーカーをクリックすると会社名が表示されます。

「height」オプションは高さを表すのですが、設定しないと横長の地図になることが多いので正方形の地図を表示するために設定した方がよいです。

周辺地図

ネクステージ・サービス株式会社
地下鉄長堀鶴見緑地線 西大橋駅 徒歩5分

その他のよく使用するオプションについては以下を参照下さい。

Simple Mapのオプション項目

オプション項目説明初期値
width地図の幅
(%またはpx値)
100%
height地図の高さ
(%またはpx値)
200px
zoom地図の倍率
(値を大きくすると大きくなる)
16
breakpoint画面幅のブレークポイント(px値)480px