IT実践

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

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

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]の外をブロック要素で囲んでそちらで調整してください。

 

どうかこの記事へリンクを張ってください。

当コンテンツは、必要な情報がすぐに見つかるように広告をなるべく載せない方針でやっております。

僅かな広告でサイトを運営していくために、少しでも多くのアクセス数を必要としています。
当サイトの記事がもしお役に立ちましたら、記事の紹介やリンクをぜひお願いします。

※特にアフィリエイト広告は提灯記事になってしまいがちで、情報としての信憑性を欠くために掲載しません。

Webサイトをご紹介ください

関連記事

コメントを残す

*