谷歌地图高度 100% 的 div 父级 [英] google maps height 100% of div parent
问题描述
是否可以将 google 地图高度设为父 div 的 100%?我注意到高度为 100% 时，地图不可见，但是如果我将 div 的高度与以像素为单位的地图相加，则地图可以正确可视化.是否有一些技巧可以实现父 div 的 100% 映射?这不起作用
<div id="map" style="height:100%;"></div>这有效
<div id="map" style="height:590px;"></div>有什么想法吗?
参考:Mike Williams 的 GoogleMaps Javascript API v2 教程页面:对地图 div 使用百分比高度
<块引用>如果您尝试在地图 div 上使用 style="width:100%;height:100%" ，则会得到一个高度为零的地图 div.这是因为 div 试图成为 大小的百分比，但默认情况下 具有不确定的高度.有多种方法可以确定屏幕的高度并将该像素数用作地图 div 的高度，但一个简单的替代方法是更改 使其高度为页面的 100%.我们可以通过将 style="height:100%" 应用于 和 来做到这一点.(我们必须对两者都这样做，否则 会尝试是文档高度的 100%，并且默认高度是不确定的.)
代码片段:
var map;函数初始化(){var map = new google.maps.Map(document.getElementById("map"), {中心:新的 google.maps.LatLng(37.4419, -122.1419)，缩放:13，mapTypeId: google.maps.MapTypeId.ROADMAP});}google.maps.event.addDomListener(window, "load", initialize);html,身体 {高度:100%；宽度:100%；边距:0px；填充:0px}<script src="https://maps.googleapis.com/maps/api/js"></script><div class="block halfrect" style="height:100%"><div id="map" style="height:100%;"></div>Is it possible make a google map height 100% of the parent div? I noticed that with the height 100%, the map is not visible, but if I add the height of the div with the map in pixel the map is correctly visualize. is there some tricks to achieve the map 100% of the parent div? this doesn't works
<div class="block halfrect">
<div id="map" style="height:100%;"></div>
</div>
this works
<div class="block halfrect">
<div id="map" style="height:590px;"></div>
</div>
any idea?
If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the
<body>, but by default the<body>has an indeterminate height. There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the so that its height is 100% of the page. We can do this by applying style="height:100%" to both the<body>and the<html>. (We have to do it to both, otherwise the<body>tries to be 100% of the height of the document, and the default for that is an indeterminate height.)
code snippet:
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
<div id="map" style="height:100%;"></div>
</div>
这篇关于谷歌地图高度 100% 的 div 父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
