OpenLayersで地図を画面一杯に表示する方法


javascriptライブラリのOpenLayersを使ってWeb画面に地図を表示するサイトを作っていたのですが、ブラウザによっては地図が画面一杯にならなかったため、その時の対処法を紹介します。

CSSでpositionをfixedに変更する

以下のようにCSSで地図のスタイルのpositionをfixedに指定すると画面一杯に表示が広がってくれます。これを行わない場合は縦横比が固定の地図表示になってしまいます。

<style>
* {margin:0; padding:0;}
#map {
 height: 100%;
 width: 100%;
 float: left;
 position:fixed;
}
</style>
<div id="map"></div>

javascriptで地図サイズを変更する

ブラウザによってはCSSの指定だけで上手く表示されるのですが、一部ブラウザはこれだけでは画面一杯に表示されなかったため、javascriptで地図表示後にサイズを変更することで上手くいきました。

<script>
window.onload = function(){
  document.getElementById("map").style.height = (document.documentElement.clientHeight-20) + 'px';
  document.getElementById("map").style.width = (document.documentElement.clientWidth-10) + 'px';
}
 </script>

以上2つの設定を行えば上手く表示されました。

カテゴリーUI

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です