アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

WP-ImaGeoMap Manual

December 07, 2009

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

    使い勝手としては、「マップを編集する為のエディタが表示された」場面で ・住所を検索する ・写真をアップロードする。 これらを、このエディタ内に完結させて頂けたら嬉しいです。

    今後の開発に、期待しております。

Copyright © 2009 - 2023 akabeko.me All Rights Reserved.