更新概略

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


サンプル

こんな風に書く

&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=石庭のうずまきが有名);~

動作環境

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

ライセンス

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

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

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

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

ダウンロード

インストール

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

わかっている不具合

履歴

googlemaps3機能要約

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

3.0から3.1のAPIの変更点

3.1から3.1.1のAPIの変更点

なし

3.1から3.2のAPIの変更点

3.2から3.3のAPIの変更点

3.3から3.4のAPIの変更点

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

  1. googlemaps2をgooglemaps3に書き換える。
    1. mapctrlを使っていた場合は、zoomctrlとpanctrlに書き換える。
    2. overviewwidth, overviewheightを使ってたら消す。
    3. continuouszoomを使ってたら消す。
    4. googlebarを使ってたらsearchctrlに書き換える。
    5. geoxmlを使ってたらkmlにオプションを変更する。
  2. googlemaps2_markをgooglemaps3_markに書き換える。
    1. maxcontent, maxtitle, maxurlを使ってたら消す。
  3. googlemaps2_iconをgooglemaps3_iconに書き換える。
  4. googlemaps2_insertmarkerをgooglemaps3_insertmarkerに書き換える。

リファレンス

googlemaps3

googlemaps3_mark

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

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

googlemaps3_icon

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

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

googlemaps3_draw

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

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

googlemaps3_insertmarker

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

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

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

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

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

&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のオプションの省略

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サンプルも見てみてください。

その他

サンプル色々

PukiwikiでGoogleMaps3サンプル

コメントをどーぞ



PukiwikiでGoogleMaps PukiwikiでGoogleMaps2 CategoryJavaScript CategoryGoogle CategoryPukiwiki


|New|Edit|Freeze|Diff|Backup|Attach|Copy|Rename|
Last-modified: 2017-10-16 (Mon) 12:18:54 (6d)
HTML convert time: 0.025 sec.