こちらは旧日記です。移転先→ 愚行録 the Next Generation
Google Maps API に挑戦
「Google Maps API に朝鮮」と変換されたのは何かの陰謀か。
ちょっとやってみたいことがあって、Google Maps API 使えばできやしないかと手をつけてみた。
ドキュメントにあった The "Hello World" of Google Maps は出来たんだが（コピペすりゃいいんだから当然だ）本家のようにウィンドウをリサイズした場合に自動的に地図のサイズも変更され且つ地図の中心の緯度経度は変わらないようにする方法がわからなかった。
いろいろとキーワード変えて検索したりしていたら Google-Maps-API というグループが Google Groups にあることを知った。Google Groups というものがあること自体しらなかった。それはさておき "resize" でグループ内を検索すると "How to resize map when window is resized?" というそのものズバリなトピックが見つかった。
方法は非常に簡単で、resize 時のイベントハンドラに GMap オブジェクトの onResize をあてがってやればいいだけの話。しかしこの onResize はドキュメントに載ってないのだがよく見つけ出したものだと思う。
何はともあれできあがったものは以下の通り。
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Google Maps Test</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script><style type="text/css">v\:* {behavior:url(#default#VML);}</style></head><body><div id="map" style="width: 50%; height: 50%;"></div><script type="text/javascript">//<![CDATA[var map;if (GBrowserIsCompatible()) {map = new GMap(document.getElementById("map"));map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);if (window.attachEvent) {window.attachEvent("onresize", function() {this.map.onResize()} );} else {window.addEventListener("load", function() {this.map.onResize()} , false);window.addEventListener("resize", function() {this.map.onResize()} , false);}}//]]></script></body></html>
なお 1 行目の
<?xml version="1.0" encoding="utf-8"?>
が抜けていて、地図を表示する div の height が相対指定（80% など）の場合、IE では何も表示されなくなる（他のブラウザでの確認はしていない）。ちゃんと書いておけば何の問題もないので書いておけばよい。そもそも xhtml にはこの行が必要だったかも知れない。その辺は詳しく調べてないのでわからない。
ちなみに width と height を 100% にして body のマージンをスタイルシートで 0px にしてやると地図領域が描画領域全体に広がる。全画面表示をするとディスプレイいっぱいに地図が展開される。それだけ。
トラックバック(0)
このブログ記事を参照しているブログ一覧: Google Maps API に挑戦
このブログ記事に対するトラックバックURL: https://emeth.jp/diary_old/mt-tb.cgi/54
コメントする