リキッドデザイン対策

KsGMap に関係なく、Google Maps API を用いた地図にそのまま組みこめる Tips です。

ブラウザのサイズに応じてマップのサイズを変更させる Tips です。
マップの幅をCSSで、% 指定しただけでは潜在的なバグがあります。

例えば、CSSで100%のマップを、横幅100px程度の大きさでブラウザを開き、次に1000px程度に広げます。マップの表示エリアはブラウザ幅と同じですが、実際にマップが表示される幅は400px程度です。
きちんとしたリキッドデザインにするのは、簡単でリサイズ後に専用のGoogle Maps APIの関数を実行するだけです。

サンプル

//ウィンドウをリサイズ時に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( … の変数名を入れてください。
初期値のままの場合は、変更する必要はありません。

（この文章は、KsGMapオフィシャルサイトのTipsにも掲載しています）