HTML5・CSS3に対応しているLeafletという地図表示スクリプトがヌルヌルと動いていい感じです。
これを使ったLeaflet-MapというWordPress用のプラグインがあり、喜んで使ってみたのですが、場所を登録するのに少し手間がかかります。
一つのマップに一つのマーカーを表示するのに特化した、LatLng(経度緯度)を意識しないでもいいGUIタイプのプラグインWP Leaflet Mapperを作りましたので、良かったらお使いください。
地図タイルはOpenStreetMapまたは地理院地図に対応しています。
readmeに書き忘れてしまいましたが、マップ表示のショートコードは[lmap]で表示されます。(エルマップです。アイマップやイチマップではありません)
WP Leaflet Mapperのダウンロード
※WordPress公式サイトからのダウンロードをおすすめします。(名称を変更等、新しいバージョンになっています)
Leaflet-Mapperのインストール方法
普通のプラグインと同じですが、まだWordPress.orgには登録されていませんので、zipアーカイブをダウンロード・解凍したものをFTP等でアップロードしてください。
【2019.05.01追記】令和初日にWordPress公式プラグインとして登録されました。その際leafletから始まる名前はNGということで、正式名称がwp-leaflet-mapperとなりました。
- 上記よりleaflet-mapper.zip(またはwp-leaflet-mapper.zip)をダウンロードする
- パソコンで解凍する
- /wp-content/pluginsディレクトリにleaflet-mapperフォルダをアップロードする
- WordPressの管理画面からプラグインを有効にする
WP Leaflet Mapperの使い方
- 必要に応じて「設定」-「Leaflet-Mapper」から初期設定をする
- 各投稿ページ下段にマップが表示されているので、マウスをドラッグして位置を合わせ、ホイールでズーム倍率をいい感じにする
- ショートコード[lmap]をマップを表示したい場所に書いて保存する
WP Leaflet Mapperおすすめポイント
- 日本語に完全対応しています。(というか英語がカタコトです)
- GMapのような表示回数制限がありません。
- レスポンシブでスマホにも対応しています。
- 1記事に1マーカーのコンテンツに特化しています。
- ヌルヌル動くのが気持ちいいです。
WP Leaflet Mapperダメなポイント
- Geocodingでまともに使えそうなサービスは今のところGoogleしか無く、これを使ってしまっては本末転倒なためバッサリ切り捨てました。よって文字検索で座標を取得するということができません。
- 地図タイルのOpenStreetMapは未開拓な場所があり(詳細レベルで)、地理院地図はほとんどの地域で建物の形状まで描かれていますが、デザイン的に少しヤボッたい感じがします。
- プログラムのソースコードが汚い・冗長的。おおめに見てください。
その他のヒント
Webコンテンツ上での地図表示サイズですが、高さは設定で変更できますが幅は100%になっています。
幅を狭く表示したい場合には<div id=”map_wrap”>~</div>で囲んでいますので、スタイルシートに#map_wrapを書いて調整するか、[lmap]の外をブロック要素で囲んでそちらで調整してください。