【WP】Simple Map ワードプレスで地図を簡単設置

地図を使いたいときに便利!

ワードプレスを使っていて地図を表示させたい場面が多々あると思いますが、そんなときに非常に便利に地図を作成できるプラグインがSimple Mapです。

WordPressにGoogle Mapsを貼り付けるためのプラグインを作りました。 WordPress : Simple Map « WordPress Plugins 会社概要のページなどに企業の

作者のページは上記で日本語で説明されていますので使いやすいと思います。

GoogleMapを使っています。以前にワードプレス以外のサイトでGoogle Map APIを使っていましたがワードプレスに手動で埋め込むよりもSimple Mapを使ったほうが手っ取り早かったので導入してみました。

Simple Map インストール

ワードプレスのメニュー プラグイン>新規追加

screenclip109 screenclip108

検索窓にSimple Mapと入力して検索するとでてきます。

Simple Mapの使い方

使い方は簡単です。
[map addr=”福岡空港”]  ←このコードは[と]が全角です。実際は半角にしてください。
上のようにaddrに場所を指定するか、

もしくは、[map][/map]で挟んでもOKです。
[map]福岡空港[/map] ←このコードは[と]が全角です。実際は半角にしてください。
本当は住所や座標を指定するのですが、上記のように「福岡空港」などと指定しても表示されます!めちゃくちゃ便利です。

このように表示されます。
[map]福岡空港[/map]

ただ、外国の場所を指定するときは住所か座標を指定しないととんでもない場所(汗)が表示されてしまいますので注意しましょう。解決法は下の「変な場所が表示されるときは住所を指定する」で説明してあります。

緯度・経度の座標を指定して表示させることもできます。

[map lat=”33.590314″ lng=”130.446709″] ←このコードは[と]が全角です。実際は半角にしてください。

 倍率を指定

倍率はデフォルトで16です。1から20くらいまで指定できるようです。
Google Mapの倍率と同じようです。数が大きいほうが拡大表示になりますので、1から9くらいまでは世界地図のようになってしまいます。
現実的に使用する大きさは12くらいから17くらいまでがいいでしょう。

[map zoom=”12″]福岡空港[/map] ←このコードは[と]が全角です。実際は半角にしてください。
[map zoom=”12″]福岡空港[/map]

[map zoom=”14″]福岡空港[/map] ←このコードは[と]が全角です。実際は半角にしてください。
[map zoom=”14″]福岡空港[/map]

幅・高さを指定

widthとheightを指定するだけです。

[map width=”400px” height=”300px”]福岡空港[/map] ←このコードは[と]が全角です。実際は半角にしてください。

[map width=”400px” height=”300px”]福岡空港[/map]

変な場所が表示されるときは住所を指定する

場所の名前しか分からない時はGoogle Mapで一度確かめてから住所をコピペしたほうが確実に狙った場所を表示できるようです。

[map zoom=”12″]仁川国際空港 [/map] ←このコードは[と]が全角です。実際は半角にしてください。

例えば、韓国の仁川(インチョン)国際空港 を指定すると何故か?金浦(キンポ)空港が表示されてしまいます(汗)

[map zoom=”12″]仁川国際空港 [/map]

なのでブラウザでGoogle Mapを表示させて「仁川国際空港 」と検索します。こちらは正しく表示されるようです。

仁川国際空港 地図検索すると仁川国際空港 の地図と住所が表示されるので住所をコピーして1行に編集したらワードプレスの記事にペーストします。

 272 Gonghang-ro
Jung-gu, Incheon
大韓民国

↓  ↓ 改行を半角スペースにします。

272 Gonghang-ro Jung-gu, Incheon 大韓民国

[map zoom=”12″]272 Gonghang-ro Jung-gu, Incheon 大韓民国[/map] ←このコードは[と]が全角です。実際は半角にしてください。

[map zoom=”12″]272 Gonghang-ro Jung-gu, Incheon 大韓民国[/map]

こうすれば変な場所が表示されずに希望した場所を正しく表示されるようになります。

 その他のSimple Mapの機能

その他、infoWindow やブレークポイントを指定したりフックも使えるようになっています。

さらに詳しく知りたい場合はhttps://firegoby.jp/wp/simple-map作者さんのページで確認してみましょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする