Javascript 谷歌地图不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6930839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps not showing
提问by kaiser
I have a Google Map that won't show up. The Problem seems to be the same in FF & Chrome, but even more "bad" in IE (always latest version).
我有一个不会显示的谷歌地图。这个问题在 FF 和 Chrome 中似乎是一样的，但在 IE 中更“糟糕”（总是最新版本）。
In FF & Chrome I have a problem with the position: relative;css element style. As soon as I switch to (with dev tools) position: absolute(or: fixed);everything displays fine in FF. In Chrome the map only shows the upper 30% (from top).
在 FF 和 Chrome 中，我的position: relative;css 元素样式有问题。一旦我切换到（使用开发工具）position: absolute(or: fixed);，FF 中的一切都显示正常。在 Chrome 中，地图只显示上面的 30%（从顶部）。
In IE the map doesn't even get loaded.
在 IE 中，地图甚至没有被加载。
Here's the script stuff from the <head>. Content is only for testing and means nothing.
Note: I only use this to get the map loaded. This will be exchanged later.
这是来自<head>. 内容仅供测试，没有任何意义。
注意：我只使用它来加载地图。这将在以后交换。
<!-- Script inside <head> tag -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
file=api&
v=2&
key=<?php echo self::GOOGLE_API_KEY; ?>&
sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
var startpos = new google.maps.LatLng( 50.978056,11.029167 );
var ops = {
zoom: 6
,center: startpos
,mapTypeId:
google.maps.MapTypeId.ROADMAP
,tileSize: new google.maps.Size( 256, 256 )
}
var map = new google.maps.Map( document.getElementById("map_canvas"), ops );
var pos1 = new google.maps.LatLng( 50.7510776,12.4820724 );
var contentString1 = '<div align="left" dir="ltr" class="infowin"><h3>test</h3>testen</div>';
var infowindow1 = new google.maps.InfoWindow( {
content: contentString1
,maxWidth: 5
} );
var marker1 = new google.maps.Marker( {
position: pos1
,map: map
,title: 'test'
} );
google.maps.event.addListener(
marker1
,'click'
,function() {
infowindow1.open( map, marker1 );
}
);
}
</script>
This is the wholemark up for the page.
这是页面的全部标记。
<!-- html markup - There *really* isn't anything else -->
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>
I have spend a lot of time on google without finding anything. Any ideas? Thanks!
我在谷歌上花了很多时间却没有找到任何东西。有任何想法吗？谢谢！
回答by Zubair1
html, bodyshould be height:100%;.
html, body应该是height:100%;。
But keep in mind, if your map holder element is a child of another element then that element should also have height:100%;
但请记住，如果您的地图持有者元素是另一个元素的子元素，那么该元素也应该具有 height:100%;
Otherwise, setting just the html and body won't do you any good.
否则，只设置 html 和 body 对你没有任何好处。
An Example to explain my point:
一个例子来解释我的观点：
<html>
<head>
<style>
html, body { height:100%; }
</style>
</head>
<body>
<div id="wrapper">
<div id="google-map-holder" style="width:100%; height:100%;"></div>
</div>
</body>
</html>
So, if you're doing something like the above. The height:100%;won't work here.
所以，如果你正在做类似上面的事情。在height:100%;这里行不通。
To make this work, you have to do the same thing with all of the parents that the #google-map-holderis a child of, in this case we would add height:100%;to #wrapperelement.
为了使这个工作，你必须对所有#google-map-holder作为孩子的父母做同样的事情，在这种情况下，我们将添加height:100%;到#wrapper元素。
IF, the #google-map-holderelement was directly outside the #wrapperelement and a child of the bodydirectly then just doing html, bodywould be enough.
如果，#google-map-holder元素直接在#wrapper元素之外，并且是直接的子元素，body那么只要这样做html, body就足够了。
回答by Martin Schlagnitweit
The problem is the height: 100%;of #map_canvas.
问题是height: 100%;#map_canvas的问题。
Add this to your <head> and it should work (tested in Firefox 5 and Safari 5.1):
将此添加到您的 <head> 中，它应该可以工作（在 Firefox 5 和 Safari 5.1 中测试）：
<style>
html, body {
height: 100%;
}
</style>
For Details why this is necessary have a look at the first answer of this question:
有关为什么需要这样做的详细信息，请查看此问题的第一个答案：
