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

2006年04月25日 雑記 #JavaScript

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 ではダメでした。 (^_^;  もう少し、ブラウザ毎の記述をしないとダメなようです。 また、成功したらお知らせします。

著者写真
この記事を書いた人
山本 一道 / 有限会社アップルップル 代表

名古屋のWeb制作会社 (有)アップルップル代表。HTMLファーストな国産CMS「a-blog cms」開発・販売・サポート / 名古屋のWeb制作者コミュニティ「WCAN」主催 / コワーキングスペース「ベースキャンプ名古屋」運営。Web制作の現場をより良くするための活動をしています。

@kazumich

関連記事

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

地図のサービスを見直してみる Google / OpenStreetMap / Mapbox
地図のサービスを見直してみる Google / OpenStreetMap / Mapbox
PhotoCollage.js を a-blog cms のブログテーマに実装してみた
PhotoCollage.js を a-blog cms のブログテーマに実装してみた
CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ!
CurvyCornersはCSS3に対応した最強の角丸JavaScriptだ!
broken_image No Image
openWYSIWYG 1.01をダウンロードできるところ
Adobe Spry 1.61
Adobe Spry 1.61
broken_image No Image
#へのリンクは return false;