Home > WordPress > Google Maps for WordPressのIE表示、対策できました！

Google Maps for WordPressのIE表示、対策できました！

2008-05-29 (木) 16:02
WordPress
Google | Maps | WordPress | プラグイン | 報告 | 対策

先日より記事にしていました、プラグイン『Google　Maps for WordPress』のIEでの表示ですが、右往左往しつつも対策できました。これで安心してプラグインを使うことが出来ます。

対策したのはwp-google-maps.phpの中です。356行目あたりからがGoogle Mapsを差し込むコードになっています。デフォルトでは次のようになっています。

<div id='map_{$this->mapNum}' style='width:{$mapInfo->width}; height:{$mapInfo->height};' class='googleMap'></div>
<div id='dir_{$this->mapNum}'></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
    wpGMaps.wpNewMap({$this->mapNum}, {$json});
}
//]]>
</script>

ここにdocument.body.codeにかかわる修正を施します。またIEとそ例外でこのコードの動作が若干異なることも考慮したコードも追加します。ということで私が施した対策はこうなりました。

<div id='map_{$this->mapNum}' style='width:{$mapInfo->width}; height:{$mapInfo->height};' class='googleMap'></div>
<div id='dir_{$this->mapNum}'></div>
<p> <!-- <-- add HTML tag -->
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// del    wpGMaps.wpNewMap({$this->mapNum}, {$json});
// add -->
	var func_{$this->mapNum} = document.body.onload;

	function init_{$this->mapNum}(){
	    wpGMaps.wpNewMap({$this->mapNum}, {$json});
		if(func_{$this->mapNum}){
			func_{$this->mapNum}();
		}
	}

	if(-1 != navigator.userAgent.indexOf('MSIE')){
		document.body.onload = init_{$this->mapNum};
	}else{
		func_{$this->mapNum} = null;
		init_{$this->mapNum}();
	}
// <-- add
}
//]]>
</script>
</p> <!-- <-- add HTML tag -->

ちなみにコードの仕組みは Yusuke さんが作られた『簡単Google Maps』で書き出してくれるコードをそのまま使わせていただきました。情報を提供してくださった Yusuke さんにはこの場を借りてお礼を申し上げますm(_ _)m

とりあえずこれでGoogle Maps for WordPressの便利さそのままにIEでも使えるかと思います。IEで表示できないからと断念しておられた方、試してみてくださいね(^-^)

修正を施したGoogle Maps for WordPressでの表示はこんな感じになります。

…ただ、今度は投稿ページでGoogle Maps for WordPressの入力項目をエディターに反映することが出来ないことが発覚。自分のローカルでのテスト環境ではIEでも問題はなかったし、このサイトでもFirefoxを使った投稿でも問題はないんですよね。
パソコンを再起動することで解決しました。何だったんでしょうか…。

一難去ってまた一難…っていうところでしょうか(-_-)

関連記事：: 関連記事は今のところありません

Comments:2

Yusuke 08-05-29 (木) 21:35 返信

お役に立てて幸いです。
しかしSafariで表示するとページ上部が真っ黒です！何かの副作用でしょうか？
WindowsでもMacでも再現しました。
- みやび 08-05-30 (金) 0:34 返信
  
  コメントありがとうございます。
  javascriptが分からなくて困っていたので大変助かりました。本当にありがとうございました。
  
  しかしSafariでは上部が真っ黒ですか……。手元にはWindowsしかなく、さらにはIEとFirefoxでしか確認していなかったので気付きませんでした。私の現在の能力でどこまで追求できるか分かりませんが、ぼちぼち見てみようと思います。
  
  ただ、このプラグインが原因なら作者にお知らせしないといけなくなるのが結構ネックだったりするんですけどね。英語、苦手なものですから…(^-^;;