2007年03月06日
野菜小屋の地図をGoogle Maps APIで作ってみるテスト
飛田給駅の利用者なら、表通りでも派手に宣伝しているので大丈夫でしょうが、そうでなければ知らないひともいるかもしれないので、野菜小屋の地図を用意してみますた。
という口実で、GoogleマップのDOM APIで遊んでみたテスト。以下はトーキョーとは無関係。
もちろんAPIには多彩な機能があり、その記述方法も様々にあり得るわけですが、単にウェブページにGoogleマップを貼り付ける用途の殆どは、上のような感じの表示になるのではないかと思われ。これを簡略化すると以下のような感じになりマス（ただしこのままでは、HTMLの記述次第でトラブる可能性大なので要注意。詳しくは以下の「IE氏ね」の項あたりをご覧ください）。
<div id="地図を表示する要素のID" style="width:横幅;height:高さ">
</div>
<div id="吹き出し内に表示する要素のID">
吹き出しの内容（HTML）
</div>
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&key=APIキー">
</script>
<script type="text/javascript">
if (GBrowserIsCompatible()) {
var target = document.getElementById("地図を表示する要素のID");
var caption = document.getElementById("吹き出し内に表示する要素のID");
var map = new GMap2(target);
var latlng = new GLatLng(緯度, 経度);
map.setCenter(latlng, ズームレベル（0～19）);
map.addControl(new GLargeMapControl()); // パン/ズームコントロール（大）
map.addControl(new GMapTypeControl()); // 地図/衛星写真切り替えボタン
map.addControl(new GOverviewMapControl()); // 拡大地図
var marker = new GMarker(latlng);
map.addOverlay(marker);
marker.openInfoWindow(caption);
GEvent.addListener(
marker,
"click",
function() {marker.openInfoWindow(caption)}
);
}
</script>
- 「APIキー」はGoogle Maps API - Sign Upで。
- 緯度/経度は、GoogleマップのURLからも拾えるし、インタラクティブに取得できるところもいっぱいあるのでお好みで。
- 吹き出しの中身は、上ではあらかじめ用意してあるブロック要素をあてがってますが、DOMでいちから作るもよし（しかし例によってゴチャゴチャしたコードになる罠）、openInfoWindowメソッドをopenInfoWindowHtmlメソッドに換えれば、文字列でHTMLソースを指定できます（しかし麗しくない罠）。
- 吹き出しブロックの位置はお好みで。
さて、あいかわらずAPIにはお間抜けなバグがあり。今回もやられましたよ、ええ。
Object cannot be created in this context
下書きの際には（下書きしてんのよ）書式上の不具合を避けるためにContent-Typeをapplication/xhtml+xmlに設定していて、そうするとFirefoxは、整形式のXMLになってないとエラーを吐いてくれるのですが。そこにこのマップAPIのコードを書いたらば、「Object cannot be created in this context」というJavaScriptエラーが。
なんじゃそりゃ？と思って、Googleのスクリプトコードを見てみたら、「document.write」とか書いてあるんです。
もうね、アホかと、馬鹿かと。お前らな、XMLでdocument.writeなんてあり得ないんだよ（論理的に矛盾してる）、ボケが。
そこで公式ドキュメントを見てみたら、We recommend that you use standards-compliant XHTML on pages that contain maps
とか書いてるんです。そこでまたぶち切れですよ。
あのな、application/xhtml+xmlで動作しないのに「XHTML推奨」とか言ってんじゃねーよ、ボケが。得意げな顔して何が、XHTML推奨、だ。 お前、standards-compliantって言いたいだけちゃうんかと。
この問題は随分以前にディスカッショングループで語られていて、Known/Possible API Bugsにも掲載されていますが、Google APIsではお馴染みの、放置プレイ状態の模様。
インターネットサイト ～ は開けません。操作が中断されました（追記＠2007/03/07）
最初にアップしたものは、Internet ExplorerではGoogleマップが表示されていなかった。IEでは確認しないでアップしていて、starf42gさんからの指摘で気付きました。ありがとうございます。
IEでこれを開こうとすると、（IE7の場合）まず「インターネットサイト ～ は開けません。操作が中断されました」というダイアログが表示され、ダイアログのOKボタンをクリックすると「Internet Explorerではこのページは表示できません」ページが表示されていた。
これもよく知られたことらしいのだけど、Google Maps APIのオブジェクトを初期化する時点では、ウェブブラウザがドキュメントオブジェクトモデルの構築を完了していなければならず、しかしIEでは、このタイミングが独特らしい。
最初にアップしたもののHTMLを極端に簡略化すると以下のような感じだったのだけど、IEがDOMの構築を完了するタイミングというのは、以下では最後の「</div>」を読み込んだ時点であるらしい。
<body>
<div>
<div id="yasaigoya_map"></div>
<script src="http://maps.google.com/maps?～"></script>
<script>
var map = new Gmap2("yasaigoya_map");
...
</script>
</div>
</body>
しかし、ここではAPIオブジェクトの初期化をそれより前に行おうとしているために、こういうことになってしまうらしい。実際、このHTMLから外周を囲んでいるDIVを除去すればこの症状は発生しないし、もちろん、APIオブジェクトの初期化をbodyなどのonloadで行ってもいい。しかし一般的にCMSでは、テンプレートとコンテンツ（記事本文）は分離されているので、これらの手段は無理ではないけれど、単に記事本文中に地図を表示したい用途では望ましくもない。
というわけでここでは、addEventListener/attachEventで回避することにしましたよ。結局どんなコードになったか興味があるかたは、HTMLソースのぞいてやってください。
Category: FC東京, ウェブ制作
Posted 2007年03月06日 22:49
トラックバック
このエントリーのトラックバックURL:
http://www.rcdtokyo.com/mt/mt-rcdtokyo5428-tb.cgi/810
