- The added line is THIS COLOR.
- The deleted line is THIS COLOR.
最近[[東神戸の書店情報]]がごちゃごちゃしてきたので見やすい地図を張りたくなった。~
Pukiwikiのプラグインで何かありそうだと思って探したけど、無かったので自分で書いてみた。~
GoogleMapsはまだベータ段階でAPIも流動的なので今後もそのまま使えるかどうかは不明だが、一応できるよーということで。。~
***サンプル [#k9c7fc1f]
&googlemaps(width=300px, height=200px, small=1, maptype=0);
&googlemaps_icon(神社, http://reddog.s35.xrea.com/img/googlemaps/mm_sample.png, http://www.google.com/mapfiles/shadow50.png, 20, 34, 37, 34, ianchorx=10, ianchory=34, sanchorx=10);
-&googlemaps_mark(135.73209285736084, 35.03615464986853, title=金閣寺, caption=足利義満の別荘。先日変な男が光ケーブルを接続するために車で突っ込んだ。東側の門は暇そうな警備員が守りを固めている。(長文サンプル), image=http://reddog.s35.xrea.com/img/googlemaps/img_kinkaku.jpg);~
-&googlemaps_mark(135.73795080184937, 35.02786150715904, title=北野天満宮, caption=菅原道真を祭ってる, icon=神社);~
-&googlemaps_mark(135.7158064842224, 35.0254981588326, title=仁和寺,caption=和尚が名物(嘘));~
-&googlemaps_mark(135.72119235992432, 35.031252660853006, title=龍安寺,caption=石庭のうずまきが有名);~
こんな風に書く
&googlemaps(width=300px, height=200px, small=1, maptype=0);
&googlemaps_icon(神社, http://reddog.s35.xrea.com/img/googlemaps/mm_sample.png, http://www.google.com/mapfiles/shadow50.png, 20, 34, 37, 34, ianchorx=10, ianchory=34, sanchorx=10);
-&googlemaps_mark(135.73209285736084, 35.03615464986853, title=金閣寺, caption=足利義満の別荘。先日変な男が光ケーブルを接続するために車で突っ込んだ。東側の門は暇そうな警備員が守りを固めている。(長文サンプル), image=http://reddog.s35.xrea.com/img/googlemaps/img_kinkaku.jpg);~
-&googlemaps_mark(135.73795080184937, 35.02786150715904, title=北野天満宮, caption=菅原道真を祭ってる, icon=神社);~
-&googlemaps_mark(135.7158064842224, 35.0254981588326, title=仁和寺,caption=和尚が名物(嘘));~
-&googlemaps_mark(135.72119235992432, 35.031252660853006, title=龍安寺,caption=石庭のうずまきが有名);~
***動作環境 [#eecba4da]
Pukiwiki1.4.5をEUC-JPで使っています。~
DTD宣言でXHTMLをHTML 4.01 Transitionalとして宣言してあります。~
FirefoxとIEで超適当に動作確認。動かない環境がありそうな気がする。
***ライセンス [#f287e1ae]
BSD-Styleのライセンスです。
***ダウンロード [#y828840e]
http://reddog.s35.xrea.com/software/googlemaps.inc.php.zip
***インストール [#q8c3db97]
+[[ Google Maps API - Sign Up:http://www.google.com/apis/maps/signup.html]]でキーを取得する。(無料)
+別にやらなくてもいいけど、googlemaps.inc.phpのデフォの値(keyとか)を書き換えとくと後で楽。
+pluginディレクトリにgooglemaps.inc.phpとgooglemaps_mark.inc.phpとgooglemaps_icon.inc.phpをコピーする。
***使い方 [#z28fb4a0]
googlemapsで地図を表示して、googlemaps_markでマーカーをつけます。~
マーカーで自分で作ったアイコンを使いたいときはgooglemaps_iconでアイコンを定義します。
-書式(オプションを省略するとデフォの値が用いられます)
&googlemaps(?option=value, ...?);
&googlemaps_mark(x, y ?, option=value, ...?);
&googlemaps_icon(name, image, shadowimage, imagesize_w, imagesize_h, shadowsize_w, shadowsize_h ?, option=value, ...?);
-オプション
--googlemaps
---''key'' Googleから取得したKey
---''width'' 横幅。スタイル指定。ex. 640px, 100%など。
---''height'' 縦幅。スタイル指定。
---''cx'' 中心点
---''cy'' 中心点
---''zoom'' 倍率
---''small'' 小さい拡縮コントロールを使う(0 or 1)
---''maptype'' MapType選択コントロール(衛星写真の切替ボタン)の表示(0 or 1)
---''formatlist'' マーカーリストの書式(html文字列)
---''formatinfo'' マーカーのフキダシの書式(html文字列)
---''alink'' マップ上のinfoWindowと本文中のテキストをリンクさせる(0 or 1)
---''usetool'' いまのとこマーカーの雛型を出力するやつだけ。
formatlistとformatinfoは%title%と%caption%と%image%の文字列を各マーカーのそれに置き換える。~
例文:
<b>%title%</b> - %caption%
<b>%title%</b><br><div style='width:200px;'><span style='float:left;'>%image%</span>%caption%</div>
--googlemaps_mark
---''title'' マーカーの名前
---''caption'' マーカーの説明
---''image'' 画像
---''icon'' マーカーのアイコン(googlemaps_iconでiconを事前に作成しておく)
---''nolist'' 地図以外のマーカーリスト(上の例でいえば地図の下のやつ)に出力しない。(0 or 1)
--googlemaps_icon~
---''ianchorx'' アイコンの位置調整
---''ianchory'' アイコンの位置調整
---''sanchorx'' フキダシの位置調整
---''sanchory'' フキダシの位置調整
-アイコンの作成~
googlemaps_iconの第一引数でアイコンの名前を指定します。~
以下の引数でアイコンと、アイコンの影のURLとそれぞれのサイズを指定します。~
アイコンと影は左上の座標を原点にして重ねて表示されます。~
オプションのianchorx, ianchoryはアイコンと影の表示位置を調整します。デフォルトでは左上がマーカーの座標になるので、上の例のように画像の下の真ん中あたりを座標に合わせたいときは、ianchorx = アイコンの横幅/2, ianchory = アイコンの縦幅でよいです。省略された時は0になります。~
sanchorxとsanchoryはマーカーをクリックしたときに表示されるフキダシの位置調整をします。デフォルトではアイコンの左上に付きます。上の例では上辺の真ん中に来るように調整してます。省略された時は0になります。~
-その他
--googlemaps_markは第一引数がx,第二引数がy座標で省略不可。~
座標は適当にブックマークレットでも書いて手で調べるしかないような。~
//公式のGoogleMapsでは
// javascript:void(prompt(%22GoogleMaps中心位置%22, _m.map.getCenterLatLng()));
//このようなブックマークレットで中心座標を取得することができる。
googlemapsのusetoolで表示中の中心座標のマーカーの雛型を作成できるので、usetool=1にしてプレビューモードでその雛型をコピペしながら書くと楽かもしれない。
--デフォルトの値を変えたいとか、もう少しあれをなんとかしたい場合はソースを勝手に改造して使ってください。
--インライン型しかありません(#hoge書式のは無い)
--googlemaps_markの第一、第二引数以外はすべて一応省略可能で、引数の順番もどうでもいいです。
--googlemapsのkeyオプションはソースファイルに直接書いて省略した方が見やすい。
***今後の予定 [#ce7626d1]
-バグ出し
-ソースをきれいに
-%%いくつか機能追加(?)%% 大体自分が欲しい機能は実装した気がする。
-%%地図の日本語化(可能かどうか調べる)%% なんかしらんけどできるようになった。
-仕様の再考
***コメントをどーぞ [#q6776732]
-Safariでも動いております。 -- [[koyama]] &new{2005-10-04 15:39:37 (火)};
-nao-ponさんのPukiWikiModでは動きません。動くようにする方法はありますか? -- [[Harry]] &new{2006-02-01 01:37:11 (水)};
#comment
----
[[CategoryJavaScript]]
HTML convert time: 0.010 sec.