F.Ko-Jiの「一秒後は未来」ではウェブやSEO、API、RSSといった技術的ネタから、ちょっとした豆知識や梅酒、エンタメ系まで様々な情報を不定期にお届けしています。

F.Ko-Jiの「一秒後は未来」 > Google Maps API > 草野球グランドマップのデザイン改善

草野球グランドマップのデザイン改善

  • B!
スポンサード リンク

ブログのデザインを変更したので、今度は草野球グランドマップのデザインを変更してみました。ブログと同じくグリーンの色調です。

新しいデザインはヘッダ部分の高さと左リスト部分の幅だけを固定して、あとはブラウザの表示領域にぴったりおさまるようにJavaScriptでスタイルを調整しています。これによって地図の表示領域もブラウザのリサイズにあわせて変更されるようになっています。本家のGoogle Mapsみたいでかっこいい!と自画自賛。

ここでGoogle Maps APIの注意点をひとつ。Google Maps APIでは地図を表示するコンテナ領域のデフォルト・サイズを元に、地図の中心点などを決めていますが、地図の大きさが変更されても中心点はデフォルトのまま。そのためブラウザのリサイズにあわせて地図の大きさを変更したりすると、setCenter()などのメソッドの動きが変になってしまいます。

そのため、Google Maps APIではGMap2クラスにcheckResize()というメソッドが用意されています。リサイズにあわせて地図の大きさを変更するときは、同時にこのメソッドを記述するといいようです。

[2010-01-12] RSS フィードの URL が変わりました。お手数ですが RSS リーダーへの再登録をお願いします。
Subscribe with livedoor Reader Add to Google Subscribe with Fastladder My Yahoo!に追加 Bloglinesで閲読登録 はてなRSSに追加 エキサイトリーダーに登録


コメント

おおおお、これはいいですね。
ウインドウの中にテキストボックス・・・なるほど・・。
それと、checkResizeとは良い事聞きました!諦めて放置してたのですが、これで綺麗に実装できそうです。

スクロールバーは・・正直最初戸惑いました・・・。

>>tenさん
ありがとうございます。checkResizeがお役に立ててなによりです。

左のスクロールバーってやっぱり最初は違和感ありますよね。しばらく右側にしてみようかな。

コメントを投稿

(承認されるまでコメントは表示されません。)

Google Maps API

English version

前のエントリー: « IE7の正式名称でモテモテ
次のエントリー: チートシートとは(cheat-sheetとは) »

トラックバック

このエントリーのトラックバックURL:

タイトル:

URL:

リンク用HTMLタグ:

Agile Media Network

AMN Partner Blog

広告掲載について

東京ナイロンガールズ
最近の注目記事
持っているガジェット
powered by Gadget Party
最近のつぶやき
えもにゅ

↑ 気持ち記録サービス「えもにゅ」です

このブログの読者になる

F.Ko-Jiの「一秒後は未来」 - RSSフィード

クマでもわかるこのブログの便利な更新チェック方法

DailyFeed

あわせて読みたいブログパーツ

フィードメーター - F.Ko-Jiの「一秒後は未来」

月別アーカイブ


<< March 2010
SuMoTuWeThFrSa
 123456
78910111213
14151617181920
21222324252627
28293031 
人気エントリー
TopHatenar
携帯からのアクセスは
QRコード
http://mob.fkoji.com/