Pickupニュース

OSM – OpenStreetMap
WordPressプラグイン

OSM – OpenStreetMap

OpenStreetMapを挿入するWordPressプラグイン
Google Mapsを個人のWebページに掲載する際の利用条件がより明確化したことで、Google Maps以外の地図サービスを利用するケースも増えてくるかもしれません。今回はオープンソースの地図作成プロジェクトであるOpenStreetMapをWordPressで表示するプラグイン、OSM - OpenStreetMapの紹介です。
バージョン:3.7をベースにレビューしています。

プラグインのインストール

  1. 管理画面の プラグイン新規追加 をクリックします。
  2. プラグインの検索からプラグイン名を検索します。
  3. 該当するプラグインの今すぐインストールをクリックしてプラグインをインストールします。
  4. インストール後、有効をクリックして、プラグインを有効化します。
プラグインが有効化されると、ダッシュボードメニューの設定の中に「OSM」が追加されます。

シンプルなOpenStreetMapの表示

マーカーの追加

投稿/ページ編集画面で表示される WP OSM Plugin shortcode generatorAdd Markerタブ を開き、
  1. marker name:マーカ名を入力
  2. marker icon:マーカーアイコン選択
  3. marker text(optional):マーカークリック時に表示される情報ウィンドウに内容を入力
  4. プレビュー地図を操作して表示位置を調整後、地図内をクリックしてショートコードを発行
  5. Saveをクリックして保存
します。

地図の作成

WP OSM Plugin shortcode generatorMap & Markerタブ を開き、
  1. map type:地図の種類を選択
  2. map border:OpenStreetMap(以降OSM)の外枠の色を選択
  3. marker id:Add Markerで作成したマーカーIDを選択
  4. map controls:fullscreen(全画面表示)、scaleline(縮尺目盛)、mouse position(マウス位置の座標)にチェック
  5. プレビュー地図を操作して表示位置を調整後、地図内をクリックしてショートコードを発行
します。

投稿/ページに挿入

発行されたショートコードを貼り付けて、OSMを表示します。

デモ

シンプルなOpenStreetMapの表示デモです。

Webサイト

コメントを残す

記事ランキング