Google地图不显示 [英] Google Maps not showing
问题描述
我有一个不会显示的Google地图。这个问题似乎在FF& Chrome浏览器，但在IE浏览器（甚至是最新版本）中甚至更糟糕。
在FF& Chrome我有 position：absolute（或：fixed）; FF中的所有内容都可以正常显示。在Chrome浏览器中，地图只显示30％（从顶部开始）。
在IE中，地图甚至没有加载过。
以下是< head> 中的脚本内容。内容仅用于测试，毫无意义。
注意：我只用这个来加载地图。
<！ - 内部脚本< head>标签 - >
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js？
file = api& amp;
v = 2& amp;
key =<？php echo self :: GOOGLE_API_KEY;？>& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;
< / script>
< script type =text / javascript>
函数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 =leftdir =ltrclass =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>
这是页面的整个标记。
<！ - html markup - There * really * is nothing anything - >
< body onload =initialize（）>
< div id =map_canvasstyle =width：100％; height：100％;>< / div>
< / body>
我在Google上花了很多时间而没有发现任何东西。有任何想法吗？
html，body 应该是 height：100％; 。
但请记住，如果您的地图持有人元素是另一个元素的子元素，那么该元素也应该有身高：100％;
否则，只设置html和body对你没有任何好处。
举例说明我的观点：
< html>
< head>
< style>
html，body {height：100％; }
< / style>
< / head>
< body>
< div id =wrapper>
< div id =google-map-holderstyle =width：100％; height：100％;>< / div>
< / div>
< / body>
< / html>
所以，如果你正在做类似上面的事情。 height：100％; 在这里不起作用。
要做到这一点，你必须做与＃google-map-holder 的所有父母同样的事情是在这种情况下，我们会添加 height：100％; 至 #wrapper 元素。
如果＃ google-map-holder 元素直接在 #wrapper 元素之外， body的子元素 html，body 就足够了。
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).
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).
In IE the map doesn't even get loaded.
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.
<!-- 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 whole mark 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!
html, body should be 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%;
Otherwise, setting just the html and body won't do you any good.
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.
To make this work, you have to do the same thing with all of the parents that the #google-map-holder is a child of, in this case we would add height:100%; to #wrapper element.
IF, the #google-map-holder element was directly outside the #wrapper element and a child of the body directly then just doing html, body would be enough.
这篇关于Google地图不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
