2006
08
06
草野球グランドマップのデザイン改善
スポンサード リンク
ブログのデザインを変更したので、今度は草野球グランドマップのデザインを変更してみました。ブログと同じくグリーンの色調です。
新しいデザインはヘッダ部分の高さと左リスト部分の幅だけを固定して、あとはブラウザの表示領域にぴったりおさまるようにJavaScriptでスタイルを調整しています。これによって地図の表示領域もブラウザのリサイズにあわせて変更されるようになっています。本家のGoogle Mapsみたいでかっこいい！と自画自賛。
ここでGoogle Maps APIの注意点をひとつ。Google Maps APIでは地図を表示するコンテナ領域のデフォルト・サイズを元に、地図の中心点などを決めていますが、地図の大きさが変更されても中心点はデフォルトのまま。そのためブラウザのリサイズにあわせて地図の大きさを変更したりすると、setCenter()などのメソッドの動きが変になってしまいます。
そのため、Google Maps APIではGMap2クラスにcheckResize()というメソッドが用意されています。リサイズにあわせて地図の大きさを変更するときは、同時にこのメソッドを記述するといいようです。
前のエントリー: « IE7の正式名称でモテモテ
次のエントリー: チートシートとは(cheat-sheetとは) »
トラックバック
このエントリーのトラックバックURL:
このブログをRSSリーダーで簡単購読
タイトル:
URL:
リンク用HTMLタグ:
powered by Google Chart API
コメント
おおおお、これはいいですね。
ウインドウの中にテキストボックス・・・なるほど・・。
それと、checkResizeとは良い事聞きました！諦めて放置してたのですが、これで綺麗に実装できそうです。
スクロールバーは・・正直最初戸惑いました・・・。
投稿者: ten | 2006年08月08日 19:55
>>tenさん
ありがとうございます。checkResizeがお役に立ててなによりです。
左のスクロールバーってやっぱり最初は違和感ありますよね。しばらく右側にしてみようかな。
投稿者: F.Ko-Ji | 2006年08月08日 21:38