草野球グランドマップのデザイン改善
ブログのデザインを変更したので、今度は草野球グランドマップのデザインを変更してみました。ブログと同じくグリーンの色調です。
新しいデザインはヘッダ部分の高さと左リスト部分の幅だけを固定して、あとはブラウザの表示領域にぴったりおさまるようにJavaScriptでスタイルを調整しています。これによって地図の表示領域もブラウザのリサイズにあわせて変更されるようになっています。本家のGoogle Mapsみたいでかっこいい！と自画自賛。
ここでGoogle Maps APIの注意点をひとつ。Google Maps APIでは地図を表示するコンテナ領域のデフォルト・サイズを元に、地図の中心点などを決めていますが、地図の大きさが変更されても中心点はデフォルトのまま。そのためブラウザのリサイズにあわせて地図の大きさを変更したりすると、setCenter()などのメソッドの動きが変になってしまいます。
そのため、Google Maps APIではGMap2クラスにcheckResize()というメソッドが用意されています。リサイズにあわせて地図の大きさを変更するときは、同時にこのメソッドを記述するといいようです。
コメントを残す
著者について
おおおお、これはいいですね。
ウインドウの中にテキストボックス・・・なるほど・・。
それと、checkResizeとは良い事聞きました！諦めて放置してたのですが、これで綺麗に実装できそうです。
スクロールバーは・・正直最初戸惑いました・・・。
>>tenさん
ありがとうございます。checkResizeがお役に立ててなによりです。
左のスクロールバーってやっぱり最初は違和感ありますよね。しばらく右側にしてみようかな。