PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法


投稿日:2014年5月15日
  • 0
  • 0


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

googlemaps3

googlemaps3は以前紹介したgooglemaps2の後継です。Google Map APIの変更に合わせてバージョンアップされました。

公式ページ:PukiwikiでGoogleMaps3


使い方

基本的な使い方は2と変わリません。
地図の作り方などは以前の投稿で紹介したのでそちらを参照してください。

解凍したファイルをPukiWikiのプラグインフォルダに入れるだけです。(以前のバージョンgooglemaps2_hogeというファイルがある場合は削除してください。)

注意点があるとすれば「旧バージョン(2.3)から3.1の廃止、変更点(この章もういらない?)」という解説にありますが、kmlファイルの指定がgeoxmlからkmlに変わっています。

アクアリウムWiki Mapでは以下のように指定しています。

指定方法

&googlemaps3(width=590px, height=500px, lat=35.746512, lng=139.680176, mapctrl=small, zoomctrl=normal, streetviewctrl=normal, kml=http://aqwiki.net/aqmap.kml);

わざわざ作っていただいたpreserveviewport

自動でマーカーを追加した範囲全体を表示してくれるんですが、私の場合は特定のマーカーを拡大表示したかったのでコメント欄で質問したところ「preserveviewport」というオプションを追加していただきました。感謝感謝

preserveviewportを利用した例:アクアショップ郡山

指定方法

&googlemaps3(width=590px, height=300px, lat=37.4299652, lng=140.38072820000002, mapctrl=small, zoomctrl=normal, zoom=14, streetviewctrl=normal, preserveviewport=true, kml=http://aqwiki.net/aqmap.kml);

公式ページでもサンプルをたくさん用意してくれているので参考にしましょう。


追記

Google Earth(リリース 4.0 以降)ではdescriptionタグにURLを記述すると自動でリンク表示されるようになりました。
しかしこの機能はGoogle map上では正常に機能しますが、プラグインを利用して地図を表示している場合にはリンクが文字列として表示される不具合があります。

description内でタグを使う倍はCDATAで囲みますが、リンクだけはGoogle map上で自動的にリンクにするため、CDATAの外に記述する必要があるようです。

なんでリンク限定でこんな訳の分からない機能を付けたのかわかりませんが、Google map以上のマップAPIは無いので、長いものには巻かれろ精神で修正しますw


現在のページを共有する



現在のページに関連する記事

PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法 PukiWikiにgooglemaps2を導入して、GoogleMAPを表示する方法
PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法 Google Map APIでカスタムアイコンが表示されない不具合
PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法 lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本
PukiWikiの初期設定 PukiWikiの初期設定
PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法 PukiWikiのロゴURLを変更
PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法 Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法 Google Hosted Librariesを利用して相互RSSを作る方法

おすすめの記事

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wix 

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wi…

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表…

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

Windows 10でpsd形式のファイルをサムネイル表示する方法

Windows 10でpsd形式のファイルをサムネイル表示する方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集できる投稿画面を作る方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集…

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

初めてでも理解できるようになる「Firefox機能拡張の開発」

初めてでも理解できるようになる「Firefox機能拡張の開発」

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。