リキッドデザイン対策

概要

ブラウザのサイズに応じてマップのサイズを変更させる 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

ソースと解説

ソース

//ウィンドウをリサイズ時にGoogle Maps API自体もリサイズする
if( navigator.userAgent.match( "MSIE" ) ){ window.attachEvent( "onresize" , function(){ map.onResize(); } ); }
else if( navigator.userAgent.match( "Safari" ) ){ window.onresize = function(){ map.onResize(); }; }
else { window.addEventListener( "resize" , function(){ map.onResize(); } , false ); }

map.onResize(); の map は、GMap を定義する var map = new GMap( … の変数名を入れてください。 初期値のままの場合は、変更する必要はありません。

Google Maps Editor の場合は map を gme_map に書き換えてください。

解説

ウィンドウのリサイズイベントで、Google Maps APIのリサイズも実行します。

注意

map.onResize(); は公式ドキュメントに記載されていないメソッドです。将来的に変更される可能性もあります。