GoogleMapをページ全体で表示する方法

CSSは横幅(width) は 100% の指定が可能なのですが、縦(height)がうまく効きません。 そこでリアルタイムに縦のピクセル数を指定する事で100%っぽく動くような事が可能になります。


ウィンドウをリサイズ時にJavaScriptを動かす方法が、なかなか分からず探すのに苦労したのでメモをココに残しておきます。


<SCRIPT TYPE="text/javascript">
<!--
function mapSizeChange(){
  document.getElementById('map').style.height = self.innerHeight+'px';
}
window.onresize = mapSizeChange;
//-->
</SCRIPT>

あと、Google Maps の JavaScript の最初に mapSizeChange(); を書いておかないと、最初だけ初期の指定サイズになってしまいます。


追記


Windows IE ではダメでした。 (^_^;  もう少し、ブラウザ毎の記述をしないとダメなようです。 また、成功したらお知らせします。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ!

openWYSIWYG 1.01をダウンロードできるところ

Adobe Spry 1.61

#へのリンクは return false;

a-blog で iUI.js を試してみる

最新記事

カテゴリー

アーカイブ

ハッシュタグ