web-dev-qa-db-ja.com

Google Maps Container DIVの幅と高さを100％に設定

Google Maps API v3を読み込んで、Googleマップをdivに印刷しました。しかし、幅と高さを100％に設定し、自動でマップを表示できません。

これがHTMLコードスニペットです。

<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>

この問題を修正する方法はありますか？

cssgoogle-mapsgoogle-maps-api-3css-positiongoogle-maps-api-2
58
BBKing

ページ全体をカバーする場合は、すべての親コンテナを100％幅に設定する必要があります。少なくとも#content divの幅と高さに絶対値を設定する必要があります。

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}
66
Machiel

Map Containerを相対位置に設定すると、トリックが実行されます。 HTMLです。

<body>
    <!-- Map container -->
    <div id="map_canvas"></div>
</body>

そしてシンプルCSS。

<style>
html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    position: relative;
}
</style>

すべてのブラウザでテスト済み。これがスクリーンショットです。

enter image description here

41
Madan Sapkota

CSSポジショニングの力を理解している人はほとんどいません。親コンテナの100％の高さを占めるようにマップを設定するには、次を実行します。

#map_canvas_container {position: relative;}

#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

#map_canvas_container内に絶対位置以外の要素がある場合、要素の高さが設定され、マップは正確に利用可能なスペースを取ります。

38
YaroslavS120

私のためのこの仕事。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 

#cont{
    position: relative;
    width: 300px;
    height: 300px;
}
#map_canvas{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
    console.log("Initializing...");
  var latlng = new google.maps.LatLng(LAT, LNG);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
3
Mostafa

高さを-webkit-fill-availableに設定できます

<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
1
Naresh Chennuri

親要素に影響を与えられない場合（ネストされたコンポーネントの状況など）、height: 100vhを使用して、ウィンドウ全体（= view）の高さにすることができます。

0
YoniXw

Gmapは、インラインスタイルの位置をdivに対して相対的に書き込みます。それで上書きします：

google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('maps').style.position = 'static';
    document.getElementById('maps').style.background = 'none';
});

それが役に立てば幸い。

0
abhilashv