WP-ImaGeoMap Manual
WP-ImaGeoMap の使い方をまとめたページです。
画像の準備
WP-ImaGeoMap のマップ上に配置したい画像を Web にアップロードします。アップロードが完了したら、画像の URL をメモしておきます。
画像のアップロード方法については、WordPress のメディアとして追加するか、WordPress の稼働しているサーバー上に置く事を推奨します。作者のテストでは、他のサーバーや写真共有サービスなどにアップロードされた画像も利用できましたが、動作については保証しません。
マップ エディタ
WP-ImaGeoMap のマップ設定は、ショート コード形式で記事やページに挿入されますが、多数の設定を自分で書くのは難しいので、専用のエディタで設定できるようにしています。
WordPress の管理画面から、マップを貼り付ける記事やページの編集画面を開きます。本文の編集モードが「ビジュアル」になっている場合は「HTML」に切り替えてください。この状態でメディア ボタンからマーカーのような絵のアイコンを押します。
メディア ボタンを押すと、マップを編集する為のエディタが表示されます。以下はエディタの解説用スクリーンショットです。
スクリーンショット内の各部の内容は、以下のようになります。
| 部分 | 名前 | 説明 |
|---|---|---|
| A | 選択マーカー | 選択しているマーカーです。 |
| B | マーカー | 選択されていないマーカーです。 |
| C | 画像追加ボタン | マップに画像を追加する為のボタンです。 |
| D | マーカー表示ボタン | 選択しているマーカーがマップの中央に表示されるように、マップを移動します。 |
| E | マーカー削除ボタン | 選択しているマーカーを削除します。 |
| F | サムネイル | 選択しているマーカーに対応する画像の縮小イメージを表示します。 |
| G | 画像情報 | 画像情報の表示と編集を行います。 |
| H | コメント | 画像へのコメントを記入します。 |
| I | EXIF 読み込みチェック | チェックされている場合は、画像を追加した時に GPS 情報や撮影日時を読み込み、マーカーの位置と画像情報に反映させます。読み込めない場合、マーカーはマップの現在位置の中央に追加されます。 |
| J | 投稿挿入ボタン | マップの編集が完了した時に押す事で、記事やページにマップ設定を挿入します。 |
画像の追加
エディタを起動したら画像を追加してゆきます。初めにエディタから画像追加ボタンを押して下さい。すると画像の URL を入力するダイアログが表示されるので、URL を入力して OK ボタンを押します。
画像の EXIF 情報を読み込む設定になっていて、EXIF に GPS 情報が記録されていた場合、マップ上のマーカー位置は、GPS 情報の緯度・経度となります。EXIF を読まない場合や、GPS 情報が記録されていない場合は、現在のマップの中央にマーカーが追加されています。
マーカーを見失った場合はマーカー表示ボタンを押すか、マップ左の拡大・縮小用スライダーでマップを縮小してゆく事で、マーカーを見つけられると思います。
画像を追加すると対応するマーカーが自動的に選択状態となります。マーカーの選択を変更する場合はマップ内のマーカーをクリックしてください。
マーカーと画像情報の編集
マーカーが選択されると、対応する画像情報とコメントを編集できます。編集できるものは以下となります。
| 名前 | 編集 | 説明 |
|---|---|---|
| 名前 | ○ | 画像のタイトルです。初期状態では、画像の URL のファイル名部分となります。 |
| 画像 | × | 画像の URL です。 |
| 日時 | ○ | 画像の撮影日時です。EXIF に記録されている場合は自動取得されます。 |
| 住所 | ○ | 住所です。Google Map の機能を利用してマーカー位置から自動取得されます。 |
| 緯度 | × | マーカー位置の緯度です。 |
| 経度 | × | マーカー位置の経度です。 |
| 標高 | ○ | マーカー位置の標高です。アメリカ地質調査所の getElevation サービスから自動取得します。失敗した場合は 0m が設定されます。 |
| コメント | ○ | 画像の説明文です。 |
マップ上のマーカーは、マウスによるドラッグ操作で位置を変更できます。マーカーの位置を調整したい場合は、この機能を利用してください。また、画像情報の中でマーカー位置に関係するものは、マーカーの移動によって自動的に内容が更新されるのでご注意ください。
マップの位置と縮尺
マップが記事やページに貼り付けられた時のマップの表示位置と縮尺は、エディタの状態がそのまま反映されます。
例えば日本の東京都新宿を表示し、縮尺が 17 なら、マーカーがアメリカに配置されていても、マップの表示位置は新宿で縮尺は 17 になる為、マーカーが画面外になる可能性があります。もしマップを設定する場合は、追加した画像のマーカーが全て表示されるように、マップの位置と縮尺を調整する事をお勧めします。
投稿に挿入
マーカーと画像情報や、マップの位置と縮尺を設定したら、エディタの投稿挿入ボタンを押して編集を終了します。この操作を行うと、記事やページの本文編集用のテキスト エリアに WP-ImaGeoMap 用のショートコードが挿入されます。
ショートコードに囲まれた内容は、マップ設定を JavaScript コードの断片として表現したものとなります。この部分を変更すると思わぬ問題が発生する場合がありますので、基本的にはエディタが出力したものをそのままご利用ください。
ショートコード
投稿画面で挿入されたショートコードについて、以下のオプションを指定できます。
| オプション | 内容 |
|---|---|
| width | マップの幅。パーセント（例：100%）やピクセル（例:640px）で指定します。省略した場合の既定値は 100% です。 |
| height | マップの高さ。ピクセル（例:350px）で指定します。省略した場合の既定値は 350px です。 |
| line | "line" を指定することで、マーカー間に線を引きます。v1.1.0 以降で利用できます。 |
以下は指定例です。サンプルコード内のショートコードに WP-ImaGeoMap が反応しないように、ショートコードの先頭の括弧は全角にしています。
マップその 1。
[imageomap width="90%" height="400px"] ...マップ設定 [/imageomap]
マップその 2。
[imageomap width="90%" height="360px" line="line"] ...マップ設定 [/imageomap]Comments from WordPress
- ほんわか 2011-04-27T22:22:00Z
使い勝手としては、「マップを編集する為のエディタが表示された」場面で ・住所を検索する ・写真をアップロードする。 これらを、このエディタ内に完結させて頂けたら嬉しいです。
今後の開発に、期待しております。