F.Ko-Jiの「一秒後は未来」

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

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

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

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

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

  1. ten より:

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

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

  2. F.Ko-Ji より:

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など