石輪っぷり!

Movable Type で住所や緯度経度を Google Maps のに変換して表示することのできる Mapper_Plugin。3年前にあるサイトを制作する際に利用したことがありますが、今回また同様の案件があり利用しました。

3年前（MT3.35）と今回（MT5.02）と構築環境に違いはあるものの考え方は同じで、通常のブログ記事アーカイブとは別に、カスタムフィールドに入力した住所情報から Mapper_Plugin で Google Maps を表示するブログ記事アーカイブを作っておき、個別アーカイブページの地図表示のリンクからこの Google Maps のアーカイブページを表示させるという方法です。

前回はサブウィンドウで Google Maps を表示させましたが、今回は写真をオーバーレイ表示する Lightbox の jQuery 版、jQuery lightbox を利用していることから、Google Maps も同じようにオーバーレイ表示したいと考え、画像だけでなく HTML もオーバーレイ表示できる ThickBox を利用することにしました。

しかし、Google Maps の場合はすんなり行かず、いくつかの Tips がありましたので、その覚え書きです。

まず、Google Maps の表示以前に、複数画像をグループ化して表示させるための rel 属性を付けると拡大画像が表示されません。rel 属性を付けなければ表示されるのですが、これではいちいち拡大画像を閉じなければ別の画像を拡大表示することができなくなってしまいます。

試しに ThickBox のデモサイトで使われている jQuery 1.1.3.1 をダウンロードして入れ替えてみると正常に表示されます。ググってみると、既に ThickBox の開発が終了していて、今回使用している jQuery 1.4.2 や 1.3.x に対応してないことがわかりました。同時にその解決策も紹介されていて、thickbox.js の79行目

TB_TempArray = $("a[rel="+@imageGroup+"]").get();

の @ を取り、

TB_TempArray = $("a[rel="+imageGroup+"]").get();

と書き替えれば rel 属性を付けてグループ化することができました。

参考サイト：「class="thickbox" に rel をつけると画像が表示されない」(Development memo)

次に、これも Google Maps 表示以前の問題ですが、Mac 版 Firefox で表示すると拡大表示の周りがブラックアウトされません。でもこれは単にダウンロードすべきファイルが足りなかっただけ。ThickBox のサイトの Download の項には thickBox.js もしくは thickbox-compressed.js、ThickBox.css、そして loadingAnimation.gif しかないのですが、How to Implement ThickBox の項を見ると、As of version 3.1 you will also need to update the path to the macFFBgHack.png in the thickbox.css file. と書かれています。英語は読めないのですが(笑)、macFFBgHack.png をダウンロードして thickbox.css と同じ場所に置いたら OK でした。

そしていよいよ、ThickBox のウィンドウ内に Google Maps を表示してみます。ThickBox の iFramed Content として表示させるので、Google Maps 用のブログ記事アーカイブのパスを map/<$mt:EntryID pad="1"$>.html とすると、

<a href="map/<$mt:EntryID pad="1"$>.html?width=750&amp;height=570&amp;KeepThis=true&amp;TB_iframe=true" class="thickbox">地図を表示</a>

という具合になります。しかし、いざ表示してみると、ThickBox の領域内で表示した Google Maps の中心が大きくずれています。さらに Internet Explore 8 では地図が一部グレーに塗りつぶされた状態になっています。Thickbox で Google Maps は無理なのかなと思いつつ、これもググってみることに。

まず見つけたのが「MovableTypeでGoogleMapsを住所からthickboxで表示する」という記事。まさにいまやろうとしていることです。あらかじめページの下部でインラインフレームで Google Maps を読み込んで style="display: none;" で非表示にしておき、iFramed Content ではなく Inline Content として ThickBox のウィンドウの中にインラインフレームごと表示させるという方法のようです。
しかし、Firefox や Safari ではちゃんと Google Maps の中心が表示されるのですが、Internet Explorer では相変わらず中心がずれたままです。

さらにググってみて、特に Movable Type に関しての記事ではないのですが「Google MapをThickBox上に表示する方法 - とあるWEBクリエイターのblog」という記事が大変参考になりました。

ThickBox での表示方法は最初に設定した iFramed Content 方式に戻してページ下部での Google Maps の読み込みはやめ、ここに書かれているコードを参考に Mapper_Plugin の 131行目からの Google Maps 表示部分のソースコードを以下のように書き替えました。

my $preamble_tmpl = <<'EOT';
<script type="text/javascript" src="http://maps.google.com/maps?<TMPL_IF NAME="language">hl=<TMPL_VAR NAME="language">&amp;</TMPL_IF>file=api&amp;v=2&amp;key=<TMPL_VAR NAME="google_maps_key">" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function attachOnLoad(func) {
    window.attachEvent ?
	window.attachEvent('onload',func) : 
	window.addEventListener('load',func,false);
}
function attachBeforeUnload(func) {
    window.attachEvent ?
	window.attachEvent('onbeforeunload',func) : 
	window.addEventListener('beforeunload',func,false);
}
function generateGMap(mapid, address, lat, lng, zoom, maptype) {
	var check_flame_set = function(){
		if(!parent.document.getElementById("TB_window")){
			clearInterval(timerID);
			show_map();
		}else if(parent.document.getElementById("TB_window").style.display=="block"){
			clearInterval(timerID);
			show_map();
		}
	}
	var timerID = setInterval(check_flame_set, 500);
	var show_map = function(){
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById(mapid));
		map.addControl(new GLargeMapControl3D());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.addControl(new GOverviewMapControl(new GSize(180,150)));
		var center = new GLatLng(lat, lng);
		if (typeof maptype == 'string') maptype = eval(maptype);
		map.setCenter(center, zoom, maptype);
		var marker = new GMarker(center, G_DEFAULT_ICON);
		map.addOverlay(marker);
		var html = '<div style="width:12em;font-size:small">'+address+'</div>';
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(html);
		});
	    } else {
		document.getElementById(mapid).innerHTML = '<p>The Google Map that should be displayed on this page is not compatible with your browser. Sorry.</p>';
		}
	}
}
attachBeforeUnload(function(){GUnload()});
//]]>
</script>
EOT

これで当初の思惑どおり、ThickBox で Google Maps を表示させることが出来ました。