**更新概略 [#l4a46537]
2012-10-27 3.0.0 GoogleMaps JavaScript API v3に変更をしました。変更色々。[[履歴>#history]]と[[3.0の変更点>#change3_0]]を見てください。~
----
**サンプル [#z08dcf53]
&googlemaps3(width=300px, height=200px, zoomctrl=small);
&googlemaps3_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);
-&googlemaps3_mark(35.039379, 135.729248, title=金閣寺, caption=足利義満の別荘。先日変な男が光ケーブルを接続するために車で突っ込んだ。東側の門は暇そうな警備員が守りを固めている。（長文サンプル）, image=http://reddog.s35.xrea.com/img/googlemaps/img_kinkaku.jpg);~
-&googlemaps3_mark(35.031087, 135.735106, title=北野天満宮, caption=菅原道真を祭ってる, icon=神社);~
-&googlemaps3_mark(35.028723, 135.712963, title=仁和寺,caption=和尚が名物(嘘）);~
-&googlemaps3_mark(35.034477, 135.718348, title=龍安寺,caption=石庭のうずまきが有名);~
こんな風に書く
&googlemaps3(width=300px, height=200px, zoomctrl=small);
&googlemaps3_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);
-&googlemaps3_mark(35.039379, 135.729248, title=金閣寺, caption=足利義満の別荘。先日変な男が光ケーブルを接続するために車で突っ込んだ。東側の門は暇そうな警備員が守りを固めている。（長文サンプル）, image=http://reddog.s35.xrea.com/img/googlemaps/img_kinkaku.jpg);~
-&googlemaps3_mark(35.031087, 135.735106, title=北野天満宮, caption=菅原道真を祭ってる, icon=神社);~
-&googlemaps3_mark(35.028723, 135.712963, title=仁和寺,caption=和尚が名物(嘘）);~
-&googlemaps3_mark(35.034477, 135.718348, title=龍安寺,caption=石庭のうずまきが有名);~
**動作環境 [#vbf9d258]
Pukiwiki1.4.7をUTF-8で使っています。~
DTD宣言でXHTMLをHTML 4.01 Transitionalとして宣言してあります。~
FirefoxとIEで超適当に動作確認。動かない環境がありそうな気がする。
**ライセンス [#zb45801d]
BSD-Styleのライセンスです。~
~
Google Maps APIそのものの使用条件は、[[Google Maps API Terms of Use:http://www.google.com/apis/maps/terms.html]]を読んでください。要約すると、
+ユーザーが無料でアクセスできるなら商用、個人問わず自由に使用可能。
+イントラネットは不可。
+一日50万ページビューのときは事前に申告する。
~ということらしいです。この条件に合わない時は、[[エンタープライズ版:http://www.google.com/enterprise/maps/]]を購入しろということらしいです。このPukiwikiのプラグインもGoogleのAPIを使っているので、Googleの示した使用条件に従って使用してください。
**ダウンロード [#c9fb8225]
-3.0~
--EUC-JP版~
http://reddog.s35.xrea.com/software/googlemaps3.0.0.inc.php_eucjp.zip~
--UTF-8版~
http://reddog.s35.xrea.com/software/googlemaps3.0.0.inc.php_utf8.zip~
~
新バージョンはバグがてんこ盛りなのでそのつもりでどうぞ。
**インストール [#e3587e90]
+pluginディレクトリにgooglemaps2.inc.phpとgooglemaps2_mark.inc.phpとgooglemaps2_icon.inc.phpとgooglemaps2_draw.inc.phpとgooglemaps2_insertmarker.inc.phpをコピーする。
**わかっている不具合 [#dc6b0486]
-あまりデバッグをしていないのであやしい。携帯とかダメかも。
&aname(history);
**履歴 [#n73ce460]
-1.1 2005-09-25
--リリース
-2.0 2006-04-20
--Googlemapsのverion2のAPIに対応した。大幅仕様変更。名前をgooglemaps2に変更した。
-3.0 2012-10-27
--Googlemapsのverion3のAPIに対応した。大幅仕様変更。名前をgooglemaps3に変更した。
**googlemaps3機能要約 [#a7eadfb4]
-1ページ内に複数の地図を表示できる。
-OverviewMapコントロールが表示できる。
-アイコンを表示しないマーカーのようなもの（謎）を作れる（googlemaps3_markのnoiconオプション。）
-マーカーを一時的に隠したりできる。googlemaps3のtogglemarkerオプション
-アイコンの透明度の型抜きオプションが指定できる。googlemaps3_iconのtransparent, areaオプション。
-地図に線が引ける。
-define, classオプションで繰り返し書くオプションを省略できる。
-マーカーのタイトルがツールチップで表示できる。
-マーカーの登録が簡単にできるgooglemaps2_insertmarkerプラグイン。
-地図に塗りつぶしポリゴンを描画できる。
-マーカーごとに、表示するズームレベルを指定できる。
-ストリートビュー表示に対応。
**旧バージョン(2.3)から3.0の廃止、変更点（この章もういらない？） [#v3549c46]
-googlemaps3
--keyの廃止。v3でAPI Keyが廃止になったのでそれにあわせて不要になった。
--apiの廃止。googlemaps(1)とgooglemaps2の互換用パラメータだったので、完全に廃止。
--mapctrlの廃止。mapctrlはzoomctrlとpanctrlに分離した。
--overviewwidth, overviewheightの廃止。v3ではOverViewMapのサイズ変更ができなくなってしまったようだ？
--continuouszoomの廃止。
--googlebarの廃止。GoogleBarはv3で廃止になったため、searchctrlを代わりに作った。
--geoxmlの廃止。
--zoomctrlの追加。拡縮(ズーム)コントロール。
--panctrlの追加。移動(パン)コントロール。
--rotatectrlの追加。45度回転地図を表示するらしいが、対応地域がほとんど無いので使わないかも。
--streetviewctrlの追加。ストリートビューコントロール。
--searchctrlの追加。検索コントロール。GoogleBarの代わり。
--typeの値にterrain（地形図）を追加。roadmap(デフォの道路地図名)を追加。
--typectrlの値にhorizontal, dropdownを追加。
--crossctrlの値のshowをnormalに変更した。
-googlemaps3_mark
--maxurl, maxcontent, maxtitleの廃止。v3で無くなってしまった。
--flatの追加。アイコンの影を無くす。
-googlemaps3_icon
--変更なし
-googlemaps3_draw
--変更なし
-googlemaps3_insertmarker
--maxurlを廃止した。
//&aname(change3_1);
//**3.0から3.1のAPIの変更点
//-googlemaps3
//--xxxオプションの追加。
**Pukiwikiドキュメントの旧バージョン(2.x)から3.xの変更方法 [#w36372fb]
+googlemaps2をgooglemaps3に書き換える。
++mapctrlを使っていた場合は、zoomctrlとpanctrlに書き換える。
++overviewwidth, overviewheightを使ってたら消す。
++continuouszoomを使ってたら消す。
++googlebarを使ってたらsearchctrlに書き換える。
++geoxmlを使ったらごめんなさいだけど、もう使えません。
+googlemaps2_markをgooglemaps3_markに書き換える。
++maxcontent, maxtitle, maxurlを使ってたら消す。
+googlemaps2_iconをgooglemaps3_iconに書き換える。
+googlemaps2_insertmarkerをgooglemaps_insertmarkerに書き換える。
**リファレンス [#ec038a3f]
***googlemaps3 [#k218d87a]
-書式（オプションを省略するとデフォの値が用いられます）
&googlemaps3(?option=value, ...?);
#googlemaps3(?option=value, ...?)
-オプション
--''mapname'' 複数の地図を張る場合に必ずユニークな名前を指定してください。一枚だけの時は省略可。
--''width'' 横幅。スタイル指定。ex. 640px, 100%など。
--''height'' 縦幅。スタイル指定。
--''lat'' 中心座標の緯度
--''lng'' 中心座標の経度
--''zoom'' 倍率(0～19)
--''type'' 地図のタイプ（normal, roadmap, satellite, hybrid) normalはroadmapと同じです。
--''zoomctrl'' 地図の倍率変更スライダとかボタン。(none, normal, small, large) normalは地図の大きさによってsmall,large自動切換
--''panctrl'' 地図の移動。(none,normal)
--''typectrl'' 地図と衛星写真の切り替えボタン。（none, normal, horizontal, dropdown)
--''scalectrl'' 縮尺定規の表示。(none, normal)
--''rotatectrl'' 45度回転ボタン。地図が対応していないと表示されないみたい。
--''streetviewctrl'' ストリートビューコントロール。(none, normal)
--''overviewctrl'' オーバービューマップの表示。hide, showはどちらも表示だが、初期状態が隠れているか表示しているかの違い。(none, hide, show)
--''crossctrl'' 地図中央のセンタークロス(none, normal)
--''searchctrl'' 検索ボックス(none, normal)
--''togglemarker'' マーカーの表示を切り替えるチェックボックスの表示。(true, false)
--''noiconname'' togglemarkerで使用する。アイコン無しマーカーに使用するラベル。
--''dbclickzoom'' ダブルクリックでズームする。(true, false)
--''importicon'' Pukiwikiのページ名。指定されたページのgooglemaps3_iconを全て読み込む。
--''backlinkmarker'' 地図のページへリンクしている全てのページから最初に見つかったgooglemap3_markを各ページにつき一つ読み込んで表示する。バックリンクが多いと重くなるかもしれない。(true, false)
-特殊オプション
--define
--class
***googlemaps3_mark [#r49658fe]
&googlemaps3_mark(lat, lng ?, option=value, ...?);
#googlemaps3_mark(lat, lng ?, option=value, ...?)
-オプション
--''map'' マーカーをつけるマップ名。googlemaps3のmapname。省略したらデフォの値になる。
--''title'' マーカーの名前
--''caption'' マーカーの説明
--''image'' 画像。名前がhttp～で始まらないものはページに添付された画像と判断する。
--''zoom'' 倍率(0～17）
--''icon'' マーカーのアイコン（googlemaps3_iconでiconを事前に作成しておく）
--''nolist'' 地図以外のマーカーリスト（上の例でいえば地図の下のやつ）に出力しない。(0 or 1)
--''noinfowindow'' フキダシを表示しない(0 or 1)
--''noicon'' アイコンを表示しない(0 or 1)。これがtrueだとnoinfowindowもtrueになる。
--''alink'' マップ上のinfoWindowと本文中のテキストをリンクさせる(0 or 1)
--''maxzoom'' マーカーを表示する、地図の最大ズーム値(0～17)
--''minzoom'' マーカーを表示する、地図の最小ズーム値(0～17)
--''titleispagename'' titleをページ名にする。
-特殊オプション
--define
--class
出力されるリストとマーカーのフキダシの書式を変更するにはgooglemaps3_mark.inc.phpの
PLUGIN_GOOGLEMAPS3_MK_DEF_FORMATLIST と PLUGIN_GOOGLEMAPS3_MK_DEF_FORMATINFOをそれぞれ
書き換えてください。これらの定数で定義されているテンプレートは%title%と%caption%と%image%の文字列を各マーカーのそれに置き換えます。~
***googlemaps3_icon [#x939cc6f]
&googlemaps3_icon(name, ?, option=value, ...?);
#googlemaps3_icon(name, ?, option=value, ...?)
-オプション
--''image'' アイコン画像
--''shadow'' 影の画像
--''iw'' アイコン画像の横幅
--''ih'' アイコン画像の縦幅
--''sw'' 影の画像の横幅
--''sh'' 影の画像の縦幅
--''ianchorx'' アイコンの位置調整
--''ianchory'' アイコンの位置調整
--''sanchorx'' フキダシの位置調整
--''sanchory'' フキダシの位置調整
--''area'' アイコンの透明領域のcoordsリスト。クリッカブルマップ。例 area="1 1 4 1 4 4 1 4"
--''transparent'' アイコンの透明領域指定用pngファイル。
-特殊オプション
--define
--class
googlemaps3_iconの第一引数でアイコンの名前を指定します。~
以下の引数でアイコンと、アイコンの影のURLとそれぞれのサイズを指定します。~
アイコンと影は左上の座標を原点にして重ねて表示されます。~
オプションのianchorx, ianchoryはアイコンと影の表示位置を調整します。デフォルトでは左上がマーカーの座標になるので、上の例のように画像の下の真ん中あたりを座標に合わせたいときは、ianchorx = アイコンの横幅/2, ianchory = アイコンの縦幅でよいです。省略された時は0になります。~
sanchorxとsanchoryはマーカーをクリックしたときに表示されるフキダシの位置調整をします。デフォルトではアイコンの左上に付きます。上の例では上辺の真ん中に来るように調整してます。省略された時は0になります。~
アイコンの画像ではページ添付された画像を使うことはできません。
-アイコンの作り方
TODO
***googlemaps2_draw [#we33cf1e]
&googlemaps3_draw(command, ?, option=value, ...?);
#googlemaps3_draw(command, ?, option=value, ...?)
コマンドで描画を指定して、そのコマンドが必要とするオプションを指定する。
-コマンド
--''line''
//(35.1, 135.1) (35.2, 135.2) (35.3, 135.3) を通る線を引く。
&googlemaps3_draw(line, width=10, opacity=0.5, color=#00FF00, 35.1, 135.1, 35.2, 135.2, 35.3, 135.3);
---省略可能オプション~
map, weight, opacity, color
--''rectangle''
//(35.1, 135.1)と対角が(35.2, 135.2) の四角形
&googlemaps3_draw(rectangle, lat1=35.1, lng1=135.1, lat2=35.2, lng2=135.2);
---省略可能オプション~
map, lat1, lng1, lat2, lng2, weight, opacity, color, fillopacity, fillcolor
--''circle''
//(35.0,135.0)を中心とした半径10kmの円
&googlemaps3_draw(circle, lat=35.0, lng=135.0, radius=10);
---省略可能オプション~
map, lat, lng, radius, weight, opacity, color, fillopacity, fillcolor
--''arc''
//(35.0,135.0)を中心とした半径10kmの0度から180度までの弧を描画
&googlemaps3_draw(arc, lat=35.0, lng=135.0, radius=10, stangle=0, edangle=180);
---省略可能オプション~
map, lat, lng, radius, inradius, stangle, edangle, weight, opacity, color, fillopacity, fillcolor
--''ngon''
//(35.0,135.0)を中心とした半径10kmの正5角形の描画
&googlemaps3_draw(ngon, lat=35.0, lng=135.0, radius=10, n=5);
---省略可能オプション~
map, lat, lng, radius, rotate, n, weight, opacity, color, fillopacity, fillcolor
--''polygon''
//(35.1, 135.1) (35.2, 135.2) (35.3, 135.3) を頂点とするポリゴンの作成。
&googlemaps3_draw(polygon, width=10, opacity=0.5, color=#00FF00, 35.1, 135.1, 35.2, 135.2, 35.3, 135.3);
---省略可能オプション~
map, weight, opacity, color, fillopacity, fillcolor
-オプション
--''opacity '' 線の透明度 0.0～1.0
--''weight'' 線の太さ
--''color'' 線の色 #RRGGBB指定
--''fillcolor'' 塗りつぶしの色 #RRGGBB指定 (2.2から)
--''fillopacity'' 塗りつぶしの透明度 0.0～1.0 (2.2から)
--''map'' 描画対象のmap名
--''lat'' 緯度
--''lng'' 経度
--''lat1'' 緯度1
--''lng1'' 経度1
--''lat2'' 緯度2
--''lng2'' 経度2
--''radius'' 半径。単位はkm
--''inradius'' arcを描画する時の内側の半径。単位はkm。(2.2から)
--''stangle'' 開始角
--''edangle'' 終了角
--''rotate'' 回転度数
--''n'' 正n角形の頂点数
-特殊オプション
--define
--class
***googlemaps3_insertmarker [#j8da697e]
#googlemaps2_insertmarker(?, option=value, ...?)
''ブロック型しかありません！''
-オプション
--''map'' マーカーをつけるマップ名。googlemaps3のmapname。省略したらデフォの値になる。
--''direction'' マーカーリストを上に追加していくか、下に追加していくか。(up or down)
フォームからマップの中央にマーカーを登録する。ドラッグしたりマップを動かすと、マップ中央の位置情報が動的に更新されるので、マーカーを付けたいところをダブルクリックして中央に持ってきて、タイトルと詳細を記入してポストするだけです。
***define, classオプションを使ったオプションの省略 [#id0c92a1]
基本的に、これらのプラグインはoption=value形式でオプションを指定していくのだが、マーカーやアイコンの生成において同じオプションを繰り返し書くような場合も多く、ごちゃごちゃして見難かった。そこで、defineでオプション群を定義し、classでそれらをまとめて指定するというようなことができるようにした。
たとえば、次のように色違いのアイコンを３つ定義するとする。
&googlemaps3_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);
&googlemaps3_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);
&googlemaps3_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を使って書き直すと。
&googlemaps3_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);
&googlemaps3_icon(神社, class=mkan, image=http://reddog.s35.xrea.com/img/googlemaps/mm_jinjya.png);
&googlemaps3_icon(仏閣, class=mkan, image=http://reddog.s35.xrea.com/img/googlemaps/mm_bukkaku.png);
&googlemaps3_icon(古墳, class=mkan, image=http://reddog.s35.xrea.com/img/googlemaps/mm_kofun.png);
このように同じオプションを繰り返して書くのを省いてごちゃごちゃした部分を最小限に押し込んで、すっきり書くことができる。~
~
[[PukiwikiでGoogleMaps3サンプル]]も見てみてください。~
~
注意：今のところdefineの中にclassを指定して継承したり、複数のclassを指定したりすることはできません。%%最初はやろうと思ってたけどなんか複雑になりすぎそうな気がしてやめた。%%できません。
***googlemaps3_drawのオプションの省略 [#h13efb09]
googlemaps3_drawにもdefine, classは一応作ったのだけど、実はあまり使わない（と思う）。というのはgooglemaps3_drawは一度オプションを使うと、そのオプションは保存され、次に使うときは省略できるという状態遷移しながら描画するという風に作った。例えば、(35.00, 135.00)を中心に、半径1km, 2km, 3km, 4kmの円を書く場合、
&googlemaps3_draw(circle, map=tmap, radius=1, lat=35.00, lng=135.00, opacity=0.5, weight=10, color=#FFFFFF);
&googlemaps3_draw(circle, radius=2);
&googlemaps3_draw(circle, radius=3);
&googlemaps3_draw(circle, radius=4);
のように最初のコマンドと同じパラメータは省略できる。次に色を変えて10kmのところに円を書く場合は、
&googlemaps3_draw(circle, radius=10, color=#00FF00);
のようにcolorオプションを変更する。
~
[[PukiwikiでGoogleMaps3サンプル]]も見てみてください。~
~
***その他 [#d22c7ab5]
-デフォルトの値を変えたいとか、もう少しあれをなんとかしたい場合はソースを勝手に改造して使ってください。
-省略可能な引数のオプションは順番もどうでもいいです。
**サンプル色々 [#lfad01e9]
[[PukiwikiでGoogleMaps3サンプル]]
**コメントをどーぞ [#re81599d]
#comment
----
[[PukiwikiでGoogleMaps]] [[PukiwikiでGoogleMaps2]]
[[CategoryJavaScript]] [[CategoryGoogle]] [[CategoryPukiwiki]]
HTML convert time: 0.025 sec.