v3対応の最新版はこちらへどうぞ PukiwikiでGoogleMaps3

更新概略

2006-07-15 2.1.0 機能追加色々。履歴2.1の変更点を見てください。
2006-07-29 2.1.1 バグ修正。履歴2.1.1の変更点を見てください。
2006-08-24 2.1.2 バグ修正。履歴2.1.2の変更点を見てください。
2006-09-30 2.1.3 バグ修正。履歴2.1.3の変更点を見てください。
2006-12-30 2.2.0 機能追加色々。履歴2.2の変更点を見てください。
2007-01-10 2.2.1 バグ修正。履歴2.2.1の変更点を見てください。
2007-01-22 2.2.2 バグ修正。履歴2.2.2の変更点を見てください。
2007-01-31 2.2.3 バグ修正。履歴2.2.3の変更点を見てください。
2007-08-04 2.2.4 バグ修正と機能追加。履歴2.2.4の変更点を見てください。
2007-09-25 2.2.5 バグ修正。履歴2.2.5の変更点を見てください。
2007-12-01 2.3.0 機能追加削除。履歴2.3.0の変更点を見てください。
2008-10-21 2.3.1 バグ修正。履歴2.3.1の変更点を見てください。


サンプル

', maxtitle:'金閣寺', maxcontent:''}); }); //]]> 金閣寺 - 足利義満の別荘。先日変な男が光ケーブルを接続するために車で突っ込んだ。東側の門は暇そうな警備員が守りを固めている。(長文サンプル)
  • ', maxtitle:'北野天満宮', maxcontent:''}); }); //]]> 北野天満宮 - 菅原道真を祭ってる
  • 仁和寺 - 和尚が名物(嘘)
  • 龍安寺 - 石庭のうずまきが有名
  • こんな風に書く

    &googlemaps2(width=300px, height=200px, mapctrl=small);
    
    &googlemaps2_icon(神社, image=http://reddog.s35.xrea.com/img/googlemaps/mm_sample.png, shadow=http://www.google.com/mapfiles/shadow50.png, iw=20, ih=34, sw=37, sh=34, ianchorx=10, ianchory=34, sanchorx=10, sanchory=0, area="1 7 7 0 13 0 19 7 19 12 13 20 12 23 11 34 9 34 8 23 6 19 1 13 1 7", transparent=http://www.google.com/intl/ja_ALL/mapfiles/markerTransparent.png);
    
    -&googlemaps2_mark(35.039379, 135.729248, title=金閣寺, caption=足利義満の別荘。先日変な男が光ケーブルを接続するために車で突っ込んだ。東側の門は暇そうな警備員が守りを固めている。(長文サンプル), image=http://reddog.s35.xrea.com/img/googlemaps/img_kinkaku.jpg);~
    -&googlemaps2_mark(35.031087, 135.735106, title=北野天満宮, caption=菅原道真を祭ってる, icon=神社);~
    -&googlemaps2_mark(35.028723, 135.712963, title=仁和寺,caption=和尚が名物(嘘));~
    -&googlemaps2_mark(35.034477, 135.718348, title=龍安寺,caption=石庭のうずまきが有名);~

    (※)最近マーカーの透過画像(filetransparent.png)への直リンクがxreaに怒られないかと不安になってきたので透過画像はグーグルのマーカーのに変更した。(2007-06-06記)

    動作環境

    Pukiwiki1.4.7をEUC-JP(2007年6月からUTF-8に移行)で使っています。
    DTD宣言でXHTMLをHTML 4.01 Transitionalとして宣言してあります。
    FirefoxとIEで超適当に動作確認。動かない環境がありそうな気がする。

    ライセンス

    BSD-Styleのライセンスです。

    Google Maps APIそのものの使用条件は、Google Maps API Terms of Useを読んでください。要約すると、

    1. ユーザーが無料でアクセスできるなら商用、個人問わず自由に使用可能。
    2. イントラネットは不可。
    3. 一日50万ページビューのときは事前に申告する。

    ということらしいです。この条件に合わない時は、エンタープライズ版を購入しろということらしいです。このPukiwikiのプラグインもGoogleのAPIを使っているので、Googleの示した使用条件に従って使用してください。

    ダウンロード

    インストール

    1. Google Maps API - Sign Upでキーを取得する。(無料)
    2. 別にやらなくてもいいけど、googlemaps2.inc.phpのデフォの値(keyとか)を書き換えとくと後で楽。
    3. pluginディレクトリにgooglemaps2.inc.phpとgooglemaps2_mark.inc.phpとgooglemaps2_icon.inc.phpとgooglemaps2_draw.inc.phpとgooglemaps2_insertmarker.inc.phpをコピーする。

    わかっている不具合

    履歴

    googlemaps2機能要約

    旧バージョン(1.x)から2.0の廃止、変更点(この章もういらない?)

    2.0から2.1のAPIの変更点

    2.1から2.1.1のAPIの変更点

    なし

    2.1.1から2.1.2のAPIの変更点

    なし

    2.1.2から2.1.3のAPIの変更点

    2.1.3から2.2のAPIの変更点

    2.2から2.2.1のAPIの変更点

    なし

    2.2.1から2.2.2のAPIの変更点

    2.2.2から2.2.3のAPIの変更点

    なし

    2.2.3から2.2.4のAPIの変更点

    2.2.4から2.2.5のAPIの変更点

    なし

    2.2.5から2.3.0のAPIの変更点

    2.3.0から2.3.1のAPIの変更点

    なし

    Pukiwikiドキュメントの旧バージョン(1.x)から2.xの変更方法

    1. googlemapsをgooglemaps2に書き換える。
      1. formatlist, formatinfo, alinkを使っていた場合はgooglemaps2_markにオプションを移す。
      2. cxをlngにする。cyをlatにする。
      3. small=1を使っていた場合はmapctrl=smallに変更する。
      4. small=0を使っていた場合はmapctrl=largeに変更する。
      5. maptype=0を使っていた場合はtypectrl=noneに変更する。
      6. maptype=1を使っていた場合はtypectrl=normalに変更する。
      7. zoomを使っていた場合は値を17-zoomにする。
    2. googlemaps_markをgooglemaps2_markに書き換える。
      1. googlemaps2_mark(x, y ...)のxyを入れ替えてgooglemaps2_mark(y, x ...)にする。
    3. googlemaps_iconをgooglemaps2_iconに書き換える。
      1. googlemaps_icon(a,b,c,d,e,f,g ...)て書いてたのを、googlemaps2_icon(a, image=b, shadow=c, iw=d, ih=e, sw=f, sh=g ...)という風にオプション名を付ける。

    たぶんこれくらい。めんどくさい人用(動作非保証)→http://reddog.s35.xrea.com/js/pukiwiki_googlemaps2_update.html

    リファレンス

    googlemaps2

    googlemaps2_mark

    &googlemaps2_mark(lat, lng ?, option=value, ...?);
    #googlemaps2_mark(lat, lng ?, option=value, ...?)

    出力されるリストとマーカーのフキダシの書式を変更するにはgooglemaps2_mark.inc.phpの PLUGIN_GOOGLEMAPS2_MK_DEF_FORMATLIST と PLUGIN_GOOGLEMAPS2_MK_DEF_FORMATINFOをそれぞれ 書き換えてください。これらの定数で定義されているテンプレートは%title%と%caption%と%image%の文字列を各マーカーのそれに置き換えます。

    googlemaps2_icon

    &googlemaps2_icon(name, ?, option=value, ...?);
    #googlemaps2_icon(name, ?, option=value, ...?)

    googlemaps2_iconの第一引数でアイコンの名前を指定します。
    以下の引数でアイコンと、アイコンの影のURLとそれぞれのサイズを指定します。
    アイコンと影は左上の座標を原点にして重ねて表示されます。
    オプションのianchorx, ianchoryはアイコンと影の表示位置を調整します。デフォルトでは左上がマーカーの座標になるので、上の例のように画像の下の真ん中あたりを座標に合わせたいときは、ianchorx = アイコンの横幅/2, ianchory = アイコンの縦幅でよいです。省略された時は0になります。
    sanchorxとsanchoryはマーカーをクリックしたときに表示されるフキダシの位置調整をします。デフォルトではアイコンの左上に付きます。上の例では上辺の真ん中に来るように調整してます。省略された時は0になります。
    アイコンの画像ではページ添付された画像を使うことはできません。

    googlemaps2_draw

    &googlemaps2_draw(command, ?, option=value, ...?);
    #googlemaps2_draw(command, ?, option=value, ...?)

    コマンドで描画を指定して、そのコマンドが必要とするオプションを指定する。

    googlemaps2_insertmarker

    #googlemaps2_insertmarker(?, option=value, ...?)

    ブロック型しかありません!

    フォームからマップの中央にマーカーを登録する。ドラッグしたりマップを動かすと、マップ中央の位置情報が動的に更新されるので、マーカーを付けたいところをダブルクリックして中央に持ってきて、タイトルと詳細を記入してポストするだけです。

    define, classオプションを使ったオプションの省略

    基本的に、これらのプラグインはoption=value形式でオプションを指定していくのだが、マーカーやアイコンの生成において同じオプションを繰り返し書くような場合も多く、ごちゃごちゃして見難かった。そこで、defineでオプション群を定義し、classでそれらをまとめて指定するというようなことができるようにした。 たとえば、次のように色違いのアイコンを3つ定義するとする。

    &googlemaps2_icon(神社, image=http://reddog.s35.xrea.com/img/googlemaps/mm_jinjya.png, shadow=http://www.google.com/mapfiles/shadow50.png, iw=20, ih=34, sw=37, sh=34, ianchorx=10, ianchory=34, sanchorx=10, sanchory=0, area="1 7 7 0 13 0 19 7 19 12 13 20 12 23 11 34 9 34 8 23 6 19 1 13 1 7", transparent=http://www.google.com/intl/ja_ALL/mapfiles/markerTransparent.png);
    &googlemaps2_icon(仏閣, image=http://reddog.s35.xrea.com/img/googlemaps/mm_bukkaku.png, shadow=http://www.google.com/mapfiles/shadow50.png, iw=20, ih=34, sw=37, sh=34, ianchorx=10, ianchory=34, sanchorx=10, sanchory=0, area="1 7 7 0 13 0 19 7 19 12 13 20 12 23 11 34 9 34 8 23 6 19 1 13 1 7", transparent=http://www.google.com/intl/ja_ALL/mapfiles/markerTransparent.png);
    &googlemaps2_icon(古墳, image=http://reddog.s35.xrea.com/img/googlemaps/mm_kofun.png, shadow=http://www.google.com/mapfiles/shadow50.png, iw=20, ih=34, sw=37, sh=34, ianchorx=10, ianchory=34, sanchorx=10, sanchory=0, area="1 7 7 0 13 0 19 7 19 12 13 20 12 23 11 34 9 34 8 23 6 19 1 13 1 7", transparent=http://www.google.com/intl/ja_ALL/mapfiles/markerTransparent.png);

    アイコンは同じ形状で色違いなだけで第一引数の名前と、image以外は全てオプションが同じだとすると、同じオプションを何度もくりかえし書くのは面倒。そこでdefine, classを使って書き直すと。

    &googlemaps2_icon(dummy, define=mkan, image=http://reddog.s35.xrea.com/img/googlemaps/mm_jinjya.png, shadow=http://www.google.com/mapfiles/shadow50.png, iw=20, ih=34, sw=37, sh=34, ianchorx=10, ianchory=34, sanchorx=10, sanchory=0, area="1 7 7 0 13 0 19 7 19 12 13 20 12 23 11 34 9 34 8 23 6 19 1 13 1 7", transparent=http://www.google.com/intl/ja_ALL/mapfiles/markerTransparent.png);
    &googlemaps2_icon(神社, class=mkan, image=http://reddog.s35.xrea.com/img/googlemaps/mm_jinjya.png);
    &googlemaps2_icon(仏閣, class=mkan, image=http://reddog.s35.xrea.com/img/googlemaps/mm_bukkaku.png);
    &googlemaps2_icon(古墳, class=mkan, image=http://reddog.s35.xrea.com/img/googlemaps/mm_kofun.png);

    このように同じオプションを繰り返して書くのを省いてごちゃごちゃした部分を最小限に押し込んで、すっきり書くことができる。

    PukiwikiでGoogleMaps2サンプルも見てみてください。

    注意:今のところdefineの中にclassを指定して継承したり、複数のclassを指定したりすることはできません。最初はやろうと思ってたけどなんか複雑になりすぎそうな気がしてやめた。できません。

    googlemaps2_drawのオプションの省略

    googlemaps2_drawにもdefine, classは一応作ったのだけど、実はあまり使わない(と思う)。というのはgooglemaps2_drawは一度オプションを使うと、そのオプションは保存され、次に使うときは省略できるという状態遷移しながら描画するという風に作った。例えば、(35.00, 135.00)を中心に、半径1km, 2km, 3km, 4kmの円を書く場合、

    &googlemaps2_draw(circle, map=tmap, radius=1, lat=35.00, lng=135.00, opacity=0.5, weight=10, color=#FFFFFF);
    &googlemaps2_draw(circle, radius=2);
    &googlemaps2_draw(circle, radius=3);
    &googlemaps2_draw(circle, radius=4);

    のように最初のコマンドと同じパラメータは省略できる。次に色を変えて10kmのところに円を書く場合は、

    &googlemaps2_draw(circle, radius=10, color=#00FF00);

    のようにcolorオプションを変更する。


    PukiwikiでGoogleMaps2サンプルも見てみてください。

    その他

    サンプル色々

    PukiwikiでGoogleMaps2サンプル

    コメントをどーぞ


    PukiwikiでGoogleMaps PukiwikiでGoogleMaps3 CategoryJavaScript CategoryGoogle CategoryPukiwiki


    |New|Edit|Freeze|Diff|History|Attach|Copy|Rename|
    Last-modified: 2013-02-01 (Fri) 07:11:54
    HTML convert time: 0.072 sec.