Google Maps Anywhere : dogmap.jp

Google Maps Anywhere

Posted by をかもと at 2008年6月11日水曜日

各記事、ページ内の任意の場所にGoogle マップを貼り付けるためのプラグイン Google Maps Anywhere をリリースしました。
ダウンロードと詳細な使用方法については WordPress Plugins/JSeries を参照してください。

WordPress 2.5 以降で実装された「メディアボタン」と「ショートコードAPI」を使用しているため、WordPress 2.5 以降でしか動作しません。
っていうか、メディアボタンを操作する方法を調査するために作ったプラグインです。

プラグインを有効化すると、メディアボタンの右端に「Googleマップを追加」ボタンが追加されます。

Googleマップを検索して位置情報を取得する画面が表示されるので、ここから検索して「投稿に挿入」できます。
あと、おまけ機能として「カスタムフィールドに追加」ボタンも付けておきました。
Lightweight Google Maps で使用するカスタムフィールドの検索用としても使えますよ。

注意事項

2008/10/30 追記
右図のように Google Map の枠内に地図が表示されず、グレーの背景のみが表示される場合は style.css の記述が影響している可能性があります。

具体的には、以下のように img 要素の max-width プロパティを設定している場合。

img {
 max-width:100%;
}

これを回避するには、style.css の最下行に以下の記述を付け加えて、img エレメントの max-width プロパティをリセットしてください。

div.each_map img, div.googlemaps img {
 max-width:none;
}

デモ

長岡駅周辺 (通常地図、width 90%、height 150px、ズームレベル14)

富士山 (地形図、width 90%、height 150px、ズームレベル13)

東京タワー (ストリートビュー、width 90%、height 300px)

東京タワー

投稿者 / 日付:

をかもと

2008年6月11日水曜日 13:27:28 ( 最終更新日: 2008年10月30日木曜日 15:41:15 )

カテゴリー:

WordPress

タグ:

Google-Maps, WordPress, WordPress Plugin

Tweet this:

つぶやく

コメント / TB:

Comments(23)

Trackback(0)

トラックバック URI:

このブログで関連すると思われる他の投稿

本日の人気記事

2008年10月29日水曜日 15:27:45

をかもとさま、初めまして。
先日、「Google Maps Anywhere」プラグインをwordpressに入れてみました。
インストールまではうまくいったのですが、ブラウザで閲覧すると、縦150px・横300pxぐらいのアイボリー（グレー？）の背景色で塗りつぶされた四角いフィールドだけが出て、地図自体が表示されません。

リロードすると、一瞬だけ地図が見えますが、1秒後には消えます。
上記の色背景と、左上に「拡大・縮小」の+-ボタン、左下にロゴ、右下にzenrinという地図業者の文字だけが出ています。
また、表示する地図を決める画面で、「ストリートビュー」タブを押すと、右上の×を押していないのに画面が閉じたり、再度開いても地図画面が真っ白だったりもします。

OSはwin XP、ブラウザはIE7.0を使用しています。

解決方法を検索中に、FireFoxだと不具合が出たこともある…というのを拝見しましたが、IEでは無いような感じですが、どうでしょうか？
よろしければ、解決方法を教えていただければ幸いです。
（別にまとめサイトなどありましたら、誘導いただければ幸いです）
よろしくおねがいします。
※Win版Safari 3.1.2では無事表示されました。
※Win版FireFox 2.0.0.7では表示されませんでした。

rizzy 返信 | 引用
2008年10月29日水曜日 17:57:26

rizzy さん、はじめまして。

解決方法を検索中に、FireFoxだと不具合が出たこともある…というのを拝見しましたが、IEでは無いような感じですが、どうでしょうか？
よろしければ、解決方法を教えていただければ幸いです。

以前 Firefox 2 で出ていた問題は、今回の問題とは別で、地図貼り付け時の問題でした。
今回のは、別の問題みたいですね。

サイトを見させてもらったのですが、原因が確定できません。
とりあえず、ソースを見直した新バージョンがあるので、こちらで確認してもらってもよいですか？
~~https://sourceforge.jp/projects/wppluginsj/downloads/33548/googlemaps-anywhere-0.3.6.zip~~
(2008/10/29 23:20 不具合があったため、削除しました)

をかもと返信 | 引用
2008年10月29日水曜日 22:55:00

をかもとさま、こんにちは。
迅速なお答えとご対応に感謝します！

さっそく新verに変えたところ、地図が表示されました！

しかしまだ下記の問題があります。
・をかもとさまのサンプル表示だと、表示されている地図自体をドラッグして画面内で移動できるが、こちらではできない。
クリックしてグーグルマップにジャンプすることだけできる。
・プラグイン作業中に、「ストリートビュー」タブを押すと画面が真っ白になってしまう。もういちどマップビューに戻しても、やはり真っ白のまま。一度選択画面を閉じて再度メディアボタンを押しても、まだ真っ白のままのときがある。
・プラグイン作業で「カスタムフィールドを追加」ボタンを押すと、作業画面が閉じてしまう。
・+-マーク（拡大縮小ボタン）が消えた

また、
Lightweight Google Maps を入れたところ、
・+-マークが出ないが、地図が表示される（右下に、MAP DATA 2008 ZENRINと出る）
・+-マークが出るが、背景色のみで地図が出ない（右下に、地図データ(c)ZENRIN-利用規約と出る）
という2種類の地図の出方に分かれました。

あまりしつこくお聞きしては悪いと思いながらも、気になっているため追加でコメントさせていただきました。
ご容赦ください。
ちなみに、セキュリティソフト（カスペルスキー）を試しに切ってみても、同じ結果でした。

rizzy 返信 | 引用
2008年10月29日水曜日 23:29:06

rizzy さん、どもです。

さきほどリリースしたバージョンはバグってました
Ver.0.3.6 を差し替えました。
お手数おかけしますが、もう一度ダウンロードして入れ替えてください。
https://sourceforge.jp/projects/wppluginsj/downloads/33564/googlemaps-anywhere-0.3.6.zip

・プラグイン作業中に、「ストリートビュー」タブを押すと画面が真っ白になってしまう。もういちどマップビューに戻しても、やはり真っ白のまま。一度選択画面を閉じて再度メディアボタンを押しても、まだ真っ白のままのときがある。

ストリートビュータブをクリックすると画面が真っ白になるのは IE7 で発生している現象でしょうか？
こちらでは再現できないので、詳しく教えていただくと助かります。

・プラグイン作業で「カスタムフィールドを追加」ボタンを押すと、作業画面が閉じてしまう。

作業画面と言うのが検索画面のことであれば、正常な動作です。

あまりしつこくお聞きしては悪いと思いながらも、気になっているため追加でコメントさせていただきました。
ご容赦ください。

利用者の方の不具合報告は、助かります。
何度でも、コメントください。

また、当コメント欄がまどろっこしいのであればメールいただければ、お答えできます。
Twitter を利用されているのであれば wokamoto まで @ 返信か、DMを送ってもらっても結構です。

をかもと返信 | 引用
2008年11月13日木曜日 2:49:53

をかもとさまへ。
初めまして。coccoと申します。

早速ですが、rizzy さんと同じで下記のようになって困っています。
新版Ver.0.3.6 にも差し替えました。

・をかもとさまのサンプル表示だと、表示されている地図自体をドラッグして画面内で移動できるが、こちらではできない。
クリックしてグーグルマップにジャンプすることだけできる。
※作業画面ではドラッグしたり+-マーク（拡大縮小ボタン）は出ます。

・プラグイン作業中に、「ストリートビュー」タブを押すと画面が真っ白になってしまう。もういちどマップビューに戻しても、やはり真っ白のまま。一度選択画面を閉じて再度メディアボタンを押しても、まだ真っ白のままのときがある。

・+-マーク（拡大縮小ボタン）が消えた
プラスの情報としては、右下に、「Map data (c)2008 NFGIS,ZENRIN」と出ます。(c)は丸の中にc

MAC OSX Safari3.1.2です。
実際のサイトを確認してくださる場合は、メールを頂けたらアドレスをご連絡致します。
よろしくお願い致します。

cocco 返信 | 引用
2008年11月13日木曜日 9:59:43

cocco さん、はじめまして。

JavaScript でエラーが発生している可能性があります。
このプラグインでは jQuery　を使用しているのですが、これが Prototype.js または mootools.js とコンフリクトを起こしているのでは無いでしょうか？
# そちらのサイトを確認してみないと、原因は分かりませんが…
どちらにせよ対処方法としては prototype.js , jQuery.js, mootools.js の順でロードして、jQuery.js 読み込み後、mootools.js を読み込む前に jQuery.noConflict(); を呼び出せば、コンフリクトは回避できます。

私までメールをいただくか、Twitter を利用されているのであれば http://twitter.com/wokamoto まで＠リプライかダイレクトメッセージをいただければアドバイスできると思いますので、ご連絡ください。

をかもと返信 | 引用
2008年11月13日木曜日 14:07:14

をかもとさまへ。
お世話をかけました。

メールでのご指摘の点を直したら問題なく動作しました。ヤッター！！！　ありがとうございます。
自分の基本的なミスだとは思いますが、同様に困っている方がもしかしたらいるかもしれないので、
転載させていただきますね。

—
拝見させていただきました。JavaScript のロードが正常にできていないようですね。

お使いのテーマに問題があると思われます。
WordPress の管理画面 [デザイン]-[テーマエディタ] で、以下の点を確認してみてください。

ヘッダー（header.php）
・<head> 〜 </head> の間に <?php wp_head(); ?> と言う記述があること。
無ければ、</head> の直前に <?php wp_head(); ?> と言う行を追加してください。

フッター (footer.php)
・</body> の前に <?php wp_footer(); ?> と言う記述があること。
無ければ、</body> の直前に <?php wp_footer(); ?> と言う行を追加してください。

単一記事の投稿(single.php)、ページテンプレート(page.php)
・<?php get_header(); ?> と言う記述があること。
無いようなら、最初の行に <?php get_header(); ?> を追加してください。
(このテンプレートタグを書き込んだ所にヘッダー（header.php）の内容が読み込まれます。)
ただし、<html> <head> で開始している場合は、</head> の直前に <?php wp_head(); ?> と言う行を追加してください。

・<?php get_footer(); ?> と言う記述があること。
無いようなら、最後の行に <?php get_footer(); ?> を追加してください。
(このテンプレートタグを書き込んだ所にフッター (footer.php) の内容が読み込まれます。)
ただし、</body> </html> で終了している場合は、</body> の直前に <?php wp_footer(); ?>
と言う行を追加してください。
—

私の場合は、ヘッダーとフッターにそれぞれ記述が有りませんでしたので、
追加したら、めでたく動作致しました。
本当にありがとうございました。

cocco 返信 | 引用
2008年11月13日木曜日 14:16:11

cocco さん、どもです。

私の場合は、ヘッダーとフッターにそれぞれ記述が有りませんでしたので、
追加したら、めでたく動作致しました。
本当にありがとうございました。

動作するようになったようで、何よりです。

この辺の情報はＦＡＱとしてまとめて配布元のページにも書いておきました。
http://wppluginsj.sourceforge.jp/googlemaps-anywhere/google-maps-anywhere-faq/

をかもと返信 | 引用
2009年3月25日水曜日 21:03:14

ストリートビューで投稿しましたが・・・

ほげほげ

しか表示されません。バグでしょうか？どうすればよろしいですか？

貼り付けコードは・・・

[googlemap lat="35.~" lng="139.~" yaw="138.62903225806448" pitch="-0.516129032258071" zoom="0" width="300px" height="300px" type="STREETVIEW"]ほげほげ[/googlemap]

なお

googlemaps-anywhere.1.1.0.zip Ver.1.1.0

をインストールしております。
宜しくお願いします。

うんぽこ返信 | 引用
- 2009年3月25日水曜日 21:38:58
  うんぽこさん、はじめまして。
  
  ストリートビューで投稿しましたが・・・
  ほげほげ
  しか表示されません。バグでしょうか？どうすればよろしいですか？
  
  貼り付けコードは・・・
  [googlemap lat="35.~" lng="139.~" yaw="138.62903225806448" pitch="-0.516129032258071" zoom="0" width="300px" height="300px" type="STREETVIEW"]ほげほげ[/googlemap]
  
  この貼り付けコードは正確でしょうか？lat, lng には数値以外は入らないはずなんですが…
  
  ちょっと、この情報だけだと、こちらでも判断しかねます。
  少なくとも、以下のことを確認して、ご連絡ください。
  
  通常の Googleマップを挿入した場合は、表示されるか？
  
  WordPress, PHP のバージョンは？
  
  試してみたブラウザのバージョンは？
  
  JavaScript のエラーが発生していないか？
  
  差し支えなければ、サイトのURL
  
  使用中の「Google Maps Anywhere」以外のプラグインを、すべて停止しても表示されないか？
  
  プラグインをすべて停止してストリートビューが表示される場合、一つずつ有効にしていって、どのプラグインを有効にしたときに表示されなくなるか？
  
  どのプラグインを有効にしたときに表示されなくなったか分かったら、そのプラグインの名前と配布先、使用しているバージョン
  をかもと返信 | 引用
2009年3月26日木曜日 8:30:43

お返事ありがとうございます。一応箇条書きでお答えします。

1. 通常の Googleマップを挿入した場合は、表示されるか？

表示されます。こちらは問題ございません。

2. WordPress, PHP のバージョンは？

WP：　2.7.1（デフォルトのリッチテキストを使用）　PHP：　5.2.5

3. 試してみたブラウザのバージョンは？

Firefox：　3.0.6
IE：　6.0.29…

4. JavaScript のエラーが発生していないか？

ありませんでした。

5. 差し支えなければ、サイトのURL

ごめんなさい。第三者に頼まれていますので、お許しください。

6. 使用中の「Google Maps Anywhere」以外のプラグインを、すべて停止しても表示されないか？

全て停止して、もう一度Google Maps Anywhereをインストールしなおしても、変わりません。

7. プラグインをすべて停止してストリートビューが表示される場合、一つずつ有効にしていって、どのプラグインを有効にしたときに表示されなくなるか？
8. どのプラグインを有効にしたときに表示されなくなったか分かったら、そのプラグインの名前と配布先、使用しているバージョン

最初からです・・・

Google Maps Anywhereのバージョンを変えたり、文字コードを合わせてもだめでした。

投稿画面では、
[googlemap lat="35.658004" lng="139.745748" yaw="268.5483870967745" pitch="-4.725806451612901" zoom="0" width="420px" height="300px" type="STREETVIEW"]35.658004,139.745748[/googlemap]
でやってみて、

表示部分では・・・（前投稿してたら、Aタグが無効になっちゃいましたね・・・＜＞は全角、URLをhを外します）
＜div class=”googlemaps” style=”width:420px;height:300px;”＞＜a href=”ttp://maps.google.com/maps?f=q&hl=ja&geocode=&q=35.658004,139.745748&ie=UTF8&ll=35.658004,139.745748&t=h&z=15&layer=c&cbll=35.658004,139.745748&cbp=1,268.5483870967745,,0,-4.725806451612901&maptype=STREETVIEW” title=”35.658004,139.745748″＞35.658004,139.745748＜/a＞＜/div＞
になってしまい、

＜div class=”googlemaps” style=”width:420px;height:300px;”＞＜embed src=”http://maps.google.com/mapfiles/cb/googlepano.072.swf” quality=”high” bgcolor=”#000000″ style=”width: 842px; height: 300px; position: relative;” wmode=”opaque” swliveconnect=”false” id=”panoflash1″ allowscriptaccess=”always” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” scale=”noscale” salign=”lt” flashvars=”panoId=BhnmUUmoKeB1DEhvDTcdkQ&directionMap=N:北,W:西,S:南,E:東,NW:北西,NE:北東,SW:南西,SE:南東&yaw=270&zoom=0&browser=firefox&pitch=-40&viewerId=1&context=api&animateOnLoad=false&useSsl=false&rtfArgs=hl:ja,gl:” align=”middle”＞＜/div＞

は表示されません。

何らかの形で、embedタグが表示されず、地図モードとして認識されているかもしれません。
中身は何もいじっておらず、変な状態です。

よろしくお願いします。

うんぽこ返信 | 引用
- 2009年3月26日木曜日 10:01:28
  
  うんぽこさん、どもです。
  
  うーん、挿入されるショートコード自体は問題ないですね。
  # 私もテストサイトで、提示されたショートコードを挿入して試してみたんですが、問題ありませんでした。
  
  とすると、使用されているテーマが問題なのかもしれません。
  デフォルトテーマに変更して、ストリートビューが表示されるか確認してみてください。
  デフォルトテーマで表示されるようであれば、使用されているテーマに問題があります。
  
  テーマに問題がある場合の修正方法は、JSeries の Google Maps Anywhere 配布ページに FAQ としてまとめてありますので、そちらを参照してください。
  http://wppluginsj.sourceforge.jp/googlemaps-anywhere/google-maps-anywhere-faq/
  
  をかもと返信 | 引用
2009年10月19日月曜日 12:01:08

たいへん有用なプラグインを提供して頂き、感謝しております。
これまでローカルのアプリで緯度経度を調べていましたのでたいへん楽になりました。
一点だけ、ご報告があります。

当方環境（サーバー：Linux,PHP 5.x,MySQL 4.x　WP2.84）
Google Maps AnywhereをCustom Field GUI Utility( Ver.2.1.0)と併用した場合のみの現象です。
Google Maps Anywhereのカスタムフィールド＞「アップロード/挿入」Googlemap挿入ボタンが、
Custom Field GUI Utilitのメディア挿入ボタンを上書きしてしまうようです。
結果、GoogleMap/メディア挿入,,どちらのボタンをクリックしてもGooglemapが開いてしまいます。
あくまでも当方の環境で起きることであり、プラグインのいずれかを使用しなければとくに問題はありません。
また分かっていれば、対処できますので大きな問題とはいえませんが、ご報告しておきます。

marimo 返信 | 引用
- 2009年10月20日火曜日 22:05:49
  
  marimo さん、はじめまして。
  ご報告ありがとうございました。こちらでも、時間のある時に確認しておきます。
  
  をかもと返信 | 引用
2009年11月16日月曜日 17:39:18

はじめまして。

とてもすばらしいプラグインですね！
法人向けのWEBサイト制作をしていまして、GoogleMapsが必要なサイトにはすべて導入させていただいています。
1点、教えていただきたいことがあります。
ブログ内に「地図」で設置したマップをクリックした後の動作についてです。
クリック後に表示されるGoogleMapｓですが、「航空」をデフォルトにしてしまうようです。
クリック後も「地図」で表示するにはどうしたらよいでしょうか？

Crysta 返信 | 引用
- 2009年11月20日金曜日 20:31:20
  
  Crysta さん、どもです。
  
  ブログ内に「地図」で設置したマップをクリックした後の動作についてです。
  クリック後に表示されるGoogleMapｓですが、「航空」をデフォルトにしてしまうようです。
  クリック後も「地図」で表示するにはどうしたらよいでしょうか？
  
  ホントだ。
  以前は、そんなことは無かったんですが、Google 側で仕様変更が有ったんでしょうかね。
  確認して、時間のある時に修正します。
  ご指摘ありがとうございます。
  
  をかもと返信 | 引用
  - 2009年11月25日水曜日 10:06:40
    
    をかもとさん
    Crystaです。返信ありがとうございます。
    
    以前は、そんなことは無かったんですが、Google 側で仕様変更が有ったんでしょうかね。
    
    実は、私もつい最近になってお客さまからのご指摘で気付いた次第です。
    
    確認して、時間のある時に修正します。
    
    お忙しいところ申し訳ありません。修正版、お待ちしています。
    
    Crysta 返信 | 引用
    - 2010年1月21日木曜日 18:08:10
      
      Crysta さん、遅くなりまして申し訳ありません。
      本日、修正版の Ver.1.1.7 をリリースしましたので、バージョンアップしてやってください。
      
      をかもと返信 | 引用
      - 2010年1月22日金曜日 11:53:04
        
        をかもとさん
        
        こんにちは、Crystaです。
        プラグインの修正、ありがとうございます！先ほど管理サイトすべてでバージョンアップいたしました！！
        …が、私の設定にどこか間違いがあるのか、他のプラグインが干渉しているのかでしょうか、動作が変わらないのです。
        動作を見ていただきたいのですが、メールでご連絡いただくことは可能でしょうか？
        コメント欄にお客様のサイトのURLを記載することはできませんので…
        個別対応は不可でしょうか？
        よろしくお願いいたします。
        
        Crysta 返信 | 引用
        
        2010年1月22日金曜日 12:43:53
        
        Crysta さん、どもです。
        
        若干修正しました、これでどうでしょう？
        http://dl.dropbox.com/u/110305/googlemaps-anywhere.1.1.7.zip
        
        コメント欄にお客様のサイトのURLを記載することはできませんので…
        個別対応は不可でしょうか？
        
        メールで連絡していただいても、構いませんよ。
        # ただし、すぐに対応できるかは保障できませんが…
        
        メールアドレスは、配布ファイルの googlemaps-anywhere.php 行頭の方に Copyright 表記と一緒に書いてあります。
        
        をかもと返信 | 引用
2010年1月28日木曜日 10:52:18

をかもとさん

はじめまして。
いつもGoogle Maps Anywhereを利用させていただいております。
ありがとうございます。

さて、最新の1.2.0にバージョンアップしたところ、
マーカーが表示されなくなってしまいました‥。

以前のバージョンでは問題なかったので、何か仕様に変更がありましたでしょうか？

該当ページはこちらです。
http://www.ita-trust.jp/tochigi/

お手数おかけいたしますが、よろしくお願いいたします。

サイトウ

サイトウ返信 | 引用
- 2010年1月28日木曜日 12:31:47
  
  サイトウさん、はじめまして。
  すいません、こちらの不具合でした。修正した Ver.1.2.1 をリリースしましたので、そちらにバージョンアップ願います。
  
  なお、Ver.1.2.x からは、マイマップの表示が可能になりました。
  地図を挿入する際に「KML」という欄が追加されているので、そちらにマイマップのKMLファイルのURLを入力して頂くとマイマップがオーバーレイ表示されるようになります。
  
  をかもと返信 | 引用
  - 2010年1月28日木曜日 12:44:19
    
    をかもとさん
    
    早速ご対応いただきまして
    まことにありがとうございました。
    
    バージョンアップ後、マーカーが正常に表示されることを確認いたしました。
    いずれマイマップの機能も使わせていただきたいと思います。
    
    お忙しいところすみませんでした。
    今後ともよろしくお願いいたします。
    
    サイトウ
    
    サイトウ返信 | 引用