google maps height 100％的div父级 [英] google maps height 100% of div parent
问题描述
是否可以将Google地图高度设置为父div的100％？
我注意到，在高度100％，地图是不可见的，但如果我添加的div的高度与地图在像素中的地图是正确的可视化。
有一些技巧来实现地图100％的父div？
这不起作用
< div class =block halfrect>
< div id =mapstyle =height：100％;>< / div>
< / div>
这项工作
< div class =block halfrect>
< div id =mapstyle =height：590px;>< / div>
< / div>
任何想法？
参考：Mike Williams的Google Maps Javascript API v2教程页面：使用百分比地图div的高度
如果您尝试使用style =width：100％; height：100％你的地图div，你得到一个高度为零的地图div。这是因为div试图成为
< body>大小的百分比，但默认情况下< body>有一个不确定的高度。
有几种方法可以确定屏幕的高度，并使用像素数作为地图div的高度，但一个简单的替代方法是更改，以使其高度为页面的100％。我们可以通过对< body>和< html> 应用style =height：100％ $ c>。 （我们必须这样做，否则< body>会尝试为文档高度的100％，默认值为不确定的高度。 ）
程式码片段：
div class =snippetdata-lang =jsdata-hide =false>
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 = //maps.googleapis.com/maps/api/js\"></script><div class =block halfrectstyle =height：100％> < div id =mapstyle =height：100％;>< / div>< / 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>
这篇关于google maps height 100％的div父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
