ブラウザのサイズに応じてマップのサイズを変更させる Tips です。
マップの幅をCSSで、% 指定しただけでは潜在的なバグがあります。
例えば、CSSで100%のマップを、横幅100px程度の大きさでブラウザを開き、次に1000px程度に広げます。マップの表示エリアはブラウザ幅と同じですが、実際にマップが表示される幅は400px程度です。
リキッドデザインになっていないサンプルはこちらをクリックして下さい(新しいウィンドウが開きます)。
きちんとしたリキッドデザインにするのは、簡単でリサイズ後に専用のGoogle Maps APIの関数を実行するだけです。
動作するブラウザは下記の通りです。
IE | Firefox | Netscape | Opera | Safari |
---|---|---|---|---|
○ | ○ | ○ | ○ | ○ |
このスクリプトがそのまま使えるツールは下記の通りです。
GME |
---|
△※ |
※ GMEはマップサイズはピクセル指定しかできないようなので、出力されたHTMLの該当部分を%に書き直す必要があります。(GME Ver1.01現在)
Google Maps API の APIキー取得時のソース※に 当Tips を搭載したものです。
※ UTF-8のメタタグなど一部編集を加えています。
サンプル | |
---|---|
tips_gmap_liquiddesign.html |
HTML |
map.onResize(); の map は、GMap を定義する var map = new GMap( … の変数名を入れてください。 初期値のままの場合は、変更する必要はありません。
ウィンドウのリサイズイベントで、Google Maps APIのリサイズも実行します。
map.onResize(); は公式ドキュメントに記載されていないメソッドです。将来的に変更される可能性もあります。