ネットサービスとかGoogleとか豆知識とか。

Index > Google Maps API > 草野球グランドマップのデザイン改善
Google Maps API
2006年08月06日 22:25

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

  • このエントリーをはてなブックマークに追加
  • ... PV
スポンサード リンク

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

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

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

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