WordPress用GMapを使わない地図表示プラグイン公開

HTML5・CSS3に対応しているLeafletという地図表示スクリプトがヌルヌルと動いていい感じです。

これを使ったLeaflet-MapというWordPress用のプラグインがあり、喜んで使ってみたのですが、場所を登録するのに少し手間がかかります。

一つのマップに一つのマーカーを表示するのに特化した、LatLng(経度緯度)を意識しないでもいいGUIタイプのプラグインWP Leaflet Mapperを作りましたので、良かったらお使いください。

地図タイルはOpenStreetMapまたは地理院地図に対応しています。

readmeに書き忘れてしまいましたが、マップ表示のショートコードは[lmap]で表示されます。(エルマップです。アイマップやイチマップではありません)

WP Leaflet Mapperのダウンロード

必須leaflet-mapper.zip(WordPress用MAP登録プラグイン)
Download WordPress公式サイト 当サイト

※WordPress公式サイトからのダウンロードをおすすめします。(名称を変更等、新しいバージョンになっています)

Leaflet-Mapperのインストール方法

普通のプラグインと同じですが、まだWordPress.orgには登録されていませんので、zipアーカイブをダウンロード・解凍したものをFTP等でアップロードしてください。

【2019.05.01追記】令和初日にWordPress公式プラグインとして登録されました。その際leafletから始まる名前はNGということで、正式名称がwp-leaflet-mapperとなりました。

  1. 上記よりleaflet-mapper.zip(またはwp-leaflet-mapper.zip)をダウンロードする
  2. パソコンで解凍する
  3. /wp-content/pluginsディレクトリにleaflet-mapperフォルダをアップロードする
  4. WordPressの管理画面からプラグインを有効にする

WP Leaflet Mapperの使い方

  1. 必要に応じて「設定」-「Leaflet-Mapper」から初期設定をする
  2. 各投稿ページ下段にマップが表示されているので、マウスをドラッグして位置を合わせ、ホイールでズーム倍率をいい感じにする
  3. ショートコード[lmap]をマップを表示したい場所に書いて保存する

WP Leaflet Mapperおすすめポイント

  • 日本語に完全対応しています。(というか英語がカタコトです)
  • GMapのような表示回数制限がありません。
  • レスポンシブでスマホにも対応しています。
  • 1記事に1マーカーのコンテンツに特化しています。
  • ヌルヌル動くのが気持ちいいです。

WP Leaflet Mapperダメなポイント

  • Geocodingでまともに使えそうなサービスは今のところGoogleしか無く、これを使ってしまっては本末転倒なためバッサリ切り捨てました。よって文字検索で座標を取得するということができません。
  • 地図タイルのOpenStreetMapは未開拓な場所があり(詳細レベルで)、地理院地図はほとんどの地域で建物の形状まで描かれていますが、デザイン的に少しヤボッたい感じがします。
  • プログラムのソースコードが汚い・冗長的。おおめに見てください。

その他のヒント

Webコンテンツ上での地図表示サイズですが、高さは設定で変更できますが幅は100%になっています。
幅を狭く表示したい場合には<div id=”map_wrap”>~</div>で囲んでいますので、スタイルシートに#map_wrapを書いて調整するか、[lmap]の外をブロック要素で囲んでそちらで調整してください。

 

投稿者: iisys

全ての記事

この投稿に関する情報やご意見をお待ちしています。

メールアドレスは公開されません。