PukiwikiでGoogleMaps3

googlemaps3プラグインを入れれば簡単に表示できます。


動作環境

Pukiwiki1.5.1/PHP7をUTF-8で使っています。
DTD宣言でXHTMLをHTML 4.01 Transitionalとして宣言してあります。
FirefoxとChromeで超適当に動作確認。動かない環境がありそうな気がする。

ダウンロード

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

インストール

pluginディレクトリに
googlemaps3.inc.phpとgooglemaps3_mark.inc.phpと
googlemaps3_icon.inc.phpとgooglemaps3_draw.inc.phpとgooglemaps3_insertmarker.inc.phpをコピーする。

わかっている不具合

あまりデバッグをしていないのであやしい。携帯とかダメかも。

履歴

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機能要約

1ページ内に複数の地図を表示できる。
OverviewMapコントロールが表示できる。
アイコンを表示しないマーカーのようなもの(謎)を作れる(googlemaps3_markのnoiconオプション。)
マーカーを一時的に隠したりできる。googlemaps3のtogglemarkerオプション
アイコンの透明度の型抜きオプションが指定できる。googlemaps3_iconのtransparent, areaオプション。
地図に線が引ける。
define, classオプションで繰り返し書くオプションを省略できる。
マーカーのタイトルがツールチップで表示できる。
マーカーの登録が簡単にできるgooglemaps3_insertmarkerプラグイン。
地図に塗りつぶしポリゴンを描画できる。
マーカーごとに、表示するズームレベルを指定できる。
ストリートビュー表示に対応。
KMLファイルの読み込みに対応。(v3.1~)

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

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の変更点

googlemaps3
kmlオプションの追加。

3.1から3.1.1のAPIの変更点

なし

3.1から3.2のAPIの変更点

googlemaps3
preserveviewportオプションの追加。

3.2から3.3のAPIの変更点

googlemaps3
fullscreencontrol, gesturehandlingオプションの追加。

3.3から3.4のAPIの変更点

googlemaps3
keyオプションを復活させた。

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

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に書き換える。

リファレンス

googlemaps3

書式(オプションを省略するとデフォの値が用いられます)

オプション

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

オプション
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

オプション

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

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

コマンド

line

省略可能オプション
map, weight, opacity, color
rectangle

省略可能オプション
map, lat1, lng1, lat2, lng2, weight, opacity, color, fillopacity, fillcolor
circle

省略可能オプション
map, lat, lng, radius, weight, opacity, color, fillopacity, fillcolor
arc

省略可能オプション
map, lat, lng, radius, inradius, stangle, edangle, weight, opacity, color, fillopacity, fillcolor
ngon

省略可能オプション
map, lat, lng, radius, rotate, n, weight, opacity, color, fillopacity, fillcolor
polygon

省略可能オプション
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

read only

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

オプション
map マーカーをつけるマップ名。googlemaps3のmapname。省略したらデフォの値になる。
direction マーカーリストを上に追加していくか、下に追加していくか。(up or down)
フォームからマップの中央にマーカーを登録する。ドラッグしたりマップを動かすと、マップ中央の位置情報が動的に更新されるので、マーカーを付けたいところをダブルクリックして中央に持ってきて、タイトルと詳細を記入してポストするだけです。

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

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



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




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

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

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

googlemaps3_drawのオプションの省略

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

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

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

その他

デフォルトの値を変えたいとか、もう少しあれをなんとかしたい場合はソースを勝手に改造して使ってください。
省略可能な引数のオプションは順番もどうでもいいです。

プラグイン動作確認


トップ   差分 履歴 リロード   一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-06-03 (金) 19:20:30 by pukiwiki 1.5.4