GoogleマップAPI使用時に、地図を画面全体に表示する

GoogleマップAPIを使用して地図を表示する際に、width:100%と指定してもうまく100%表示されなかった。

ので、それっぽいスクリプトで全体表示されつつ、ついでにるようにしたので、ソースを載せておく。

※本ソースはV2です。V3では普通に100%と指定するだけで全体表示してくれて、リサイズにも対応していたので、そっち使った方が楽かもしれない。

マップを生成する前にdocument.body.clientWidthとdocument.body.clientHeightを拾ってマップを表示するdivのサイズを設定する。

リサイズイベントが走った際にも、divのサイズを調整し、checkResize()（コンテナのサイズが変更されたことを地図に通知する）を呼び出す。

heightがちゃんと取れるように、html,body { height:100%; }をスタイルに書いておく。

clientWidth・clientHeightの値をそのまま確保するとスクロールバーが出てしまうので、overflow: hidden;を設定しておく。

ブラウザによってデフォルトのマージンが異なるので、margin: 0px;も設定しておく。

実際に動作してるサンプルはこちら

IE8, IE8互換モード, Firefox3.5, Safari4で動作を確認しました。

---

CSSの設定はこんな感じ

  html,body{
    height:   100%;
    overflow: hidden;
    margin:   0px;
  }
          

---

init時の処理はこんな感じ

マップを表示しているdivのidはmap_canvasにしている。

  if (GBrowserIsCompatible()) {
    document.getElementById("map_canvas").style.width = document.body.clientWidth + "px";
    document.getElementById("map_canvas").style.height = document.body.clientHeight + "px";
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.5, 139.5), 9);
  }
          

---

Javascript全体図

  // これをonload時に呼び出す
  var map;
  function init() {
    if (GBrowserIsCompatible()) {
      resizeMapElement();
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(35.5, 139.5), 9);
    }
  }

  // これをonresize時に呼び出す
  function resize() {
    resizeMapElement();
    map.checkResize();
  }

  // Mapを表示しているdivエレメントのサイズを変更する
  function resizeMapElement() {
    document.getElementById("map_canvas").style.width = document.body.clientWidth + "px";
    document.getElementById("map_canvas").style.height = document.body.clientHeight + "px";
  }