#author("2020-05-25T08:02:45+09:00","","")
*PukiwikiでGoogleMaps3 [#v568f782]
PukiwikiでGoogleMapsが使える。
-----
#contents();
***更新概略 [#n7e7cef4]
2012-10-27 3.0.0 GoogleMaps JavaScript API v3に変更をしました。変更色々。履歴と3.0の変更点を見てください。
2012-12-01 3.1.0 KMLファイルの読込みに対応した。履歴と3.1の変更点を見てください。
2013-07-21 3.1.1 バグ修正。履歴と3.1.1の変更点を見てください。
2014-01-06 3.2.0 KML読み込み時にビューポートを変更しないオプションを追加した。履歴と3.2の変更点
2017-05-31 3.3.0 タッチ操作のハンドリングを変更するオプションと、フルスクリーンオプションを追加した。履歴と3.2の変更点
2017-10-16 3.4.0 PHP7/Pukiwiki1.5.1対応。履歴と3.2の変更点
***サンプル [#f9e1adc3]
&googlemaps3(width=700px, height=500px, zoomctrl=small, streetviewctrl=normal, gesturehandling=greedy);
&googlemaps3_mark(37.372371,138.558960, title=市役所,caption=＊（例）中心とする。);
&googlemaps3_mark(37.422333,138.840229, title=宮内駅,caption=＊サンプル);
&googlemaps3_mark(35.034477, 135.718348, title=龍安寺,caption=石庭のうずまきが有名);
こんな風に書く
&googlemaps3(width=300px, height=200px, zoomctrl=small, streetviewctrl=normal, gesturehandling=greedy);
&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=石庭のうずまきが有名);~
***動作環境 [#seb87050]
Pukiwiki1.5.1/PHP7をUTF-8で使っています。
DTD宣言でXHTMLをHTML 4.01 Transitionalとして宣言してあります。
FirefoxとChromeで超適当に動作確認。動かない環境がありそうな気がする。
***ライセンス [#m46b06fb]
BSD-Styleのライセンスです。
Google Maps APIそのものの使用条件は、Google Maps API Terms of Useを読んでください。要約すると、
ユーザーが無料でアクセスできるなら商用、個人問わず自由に使用可能。
イントラネットは不可。
一日50万ページビューのときは事前に申告する。
ということらしいです。この条件に合わない時は、エンタープライズ版を購入しろということらしいです。
このPukiwikiのプラグインもGoogleのAPIを使っているので、Googleの示した使用条件に従って使用してください。
***ダウンロード [#h295ec48]
3.3
EUC-JP版
http://reddog.s35.xrea.com/software/googlemaps-3.3.0-eucjp.zip
UTF-8版
http://reddog.s35.xrea.com/software/googlemaps-3.3.0-utf8.zip
3.4(Pukiwiki1.5.1対応)
EUC-JP版
http://reddog.s35.xrea.com/software/googlemaps-3.4.0-eucjp.zip
UTF-8版
http://reddog.s35.xrea.com/software/googlemaps-3.4.0-utf8.zip
***インストール [#x8a9253e]
pluginディレクトリにgooglemaps3.inc.phpとgooglemaps3_mark.inc.phpと
googlemaps3_icon.inc.phpとgooglemaps3_draw.inc.phpとgooglemaps3_insertmarker.inc.phpをコピーする。
わかっている不具合
あまりデバッグをしていないのであやしい。携帯とかダメかも。
***履歴 [#ab0e90c7]
1.1 2005-09-25
リリース
2.0 2006-04-20
Googlemapsのverion2のAPIに対応した。大幅仕様変更。名前をgooglemaps2に変更した。
3.0 2012-10-27
Googlemapsのverion3のAPIに対応した。大幅仕様変更。名前をgooglemaps3に変更した。
3.1 2012-12-01
KMLファイルの読込みに対応した。geoxmlの代わりにこれを使用してください。
3.1.1 2013-07-21
マーカーのズームが機能してなかったバグを修正した。
3.2 2014-01-06
KMLファイルの読込み時にビューポートを変更しないオプションを追加した。preserveviewport。
3.3 2017-05-31
フルスクリーン表示コントロールのオプションを追加した。fullscreencontrol。
タッチ操作での振る舞いのオプションを追加した。gesturehandling。
3.4 2017-10-16
Pukiwiki1.5.1およびPHP7対応版。Pukiwiki1.4以下の環境では動くかどうかよくわかりません。
↑
***googlemaps3機能要約 [#o7c962ef]
1ページ内に複数の地図を表示できる。
OverviewMapコントロールが表示できる。
アイコンを表示しないマーカーのようなもの（謎）を作れる（googlemaps3_markのnoiconオプション。）
マーカーを一時的に隠したりできる。googlemaps3のtogglemarkerオプション
アイコンの透明度の型抜きオプションが指定できる。googlemaps3_iconのtransparent, areaオプション。
地図に線が引ける。
define, classオプションで繰り返し書くオプションを省略できる。
マーカーのタイトルがツールチップで表示できる。
マーカーの登録が簡単にできるgooglemaps3_insertmarkerプラグイン。
地図に塗りつぶしポリゴンを描画できる。
マーカーごとに、表示するズームレベルを指定できる。
ストリートビュー表示に対応。
KMLファイルの読み込みに対応。(v3.1～)
***旧バージョン(2.3)から3.1の廃止、変更点（この章もういらない？） [#z025fd51]
googlemaps3
keyの廃止。v3でAPI Keyが廃止になったのでそれにあわせて不要になった。
apiの廃止。googlemaps(1)とgooglemaps2の互換用パラメータだったので、完全に廃止。
mapctrlの廃止。mapctrlはzoomctrlとpanctrlに分離した。
overviewwidth, overviewheightの廃止。v3ではOverViewMapのサイズ変更ができなくなってしまったようだ？
continuouszoomの廃止。
googlebarの廃止。GoogleBarはv3で廃止になったため、searchctrlを代わりに作った。
geoxmlの廃止。代わりにkmlを使用してください。
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を廃止した。
↑
***3.0から3.1のAPIの変更点 [#odb3b974]
googlemaps3
kmlオプションの追加。
↑
***3.1から3.1.1のAPIの変更点 [#r1e128ca]
なし
↑
***3.1から3.2のAPIの変更点 [#d67d02c7]
googlemaps3
preserveviewportオプションの追加。
↑
***3.2から3.3のAPIの変更点 [#s5a4d02d]
googlemaps3
fullscreencontrol, gesturehandlingオプションの追加。
↑
***3.3から3.4のAPIの変更点 [#d342eae9]
googlemaps3
keyオプションを復活させた。
↑
***Pukiwikiドキュメントの旧バージョン(2.x)から3.xの変更方法 [#me2c248c]
googlemaps2をgooglemaps3に書き換える。
mapctrlを使っていた場合は、zoomctrlとpanctrlに書き換える。
overviewwidth, overviewheightを使ってたら消す。
continuouszoomを使ってたら消す。
googlebarを使ってたらsearchctrlに書き換える。
geoxmlを使ってたらkmlにオプションを変更する。
googlemaps2_markをgooglemaps3_markに書き換える。
maxcontent, maxtitle, maxurlを使ってたら消す。
googlemaps2_iconをgooglemaps3_iconに書き換える。
googlemaps2_insertmarkerをgooglemaps3_insertmarkerに書き換える。
↑
***リファレンス [#w78cfbac]
↑
***googlemaps3 [#z56219a7]
書式（オプションを省略するとデフォの値が用いられます）
&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)
kml KMLファイルへのURL、もしくはページに添付されたファイル名。
preserveviewport KML読み込み時にビューポートを変更しない(true, false)。規定値はfalse(変更する)。
importicon Pukiwikiのページ名。指定されたページのgooglemaps3_iconを全て読み込む。
backlinkmarker 地図のページへリンクしている全てのページから最初に見つかったgooglemap3_markを各ページにつき一つ読み込んで表示する。バックリンクが多いと重くなるかもしれない。(true, false)
fullscreencontrol 全画面表示にするコントロールの表示。またiPhoneでは常に無効。auto時にはスマホの時だけ表示される。(none, normal, auto)。規定値はauto。
gesturehandling スマホでのタッチ操作の振る舞いを決定する。(cooperative, greedy, none, auto)。規定値はauto。
cooperativeは二本指でパン・ズームする、greedyは全てのタッチ操作で操作する、noneはタッチ操作不可、
autoはページの大きさによってcooperativeかgreedyか決定する。
特殊オプション
-define
-class
***googlemaps3_mark [#d2a79475]
&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 [#g57ee58f]
&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
***googlemaps3_draw [#x617508f]
&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 [#rd099218]
#googlemaps3_insertmarker(?, option=value, ...?)
ブロック型しかありません！
オプション
map マーカーをつけるマップ名。googlemaps3のmapname。省略したらデフォの値になる。
direction マーカーリストを上に追加していくか、下に追加していくか。(up or down)
フォームからマップの中央にマーカーを登録する。ドラッグしたりマップを動かすと、マップ中央の位置情報が動的に更新されるので、
マーカーを付けたいところをダブルクリックして中央に持ってきて、タイトルと詳細を記入してポストするだけです。
***define, classオプションを使ったオプションの省略 [#i24df6ce]
基本的に、これらのプラグインは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のオプションの省略 [#b43de531]
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サンプルも見てみてください。
***その他 [#z217e472]
デフォルトの値を変えたいとか、もう少しあれをなんとかしたい場合はソースを勝手に改造して使ってください。
省略可能な引数のオプションは順番もどうでもいいです。
↑
***サンプル色々 [#q06876a2]
PukiwikiでGoogleMaps3サンプル
&googlemaps3(mapname=kmltest,width=500px, height=300px, zoomctrl=small, typectrl=normal, kml=test.kml);
//
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
