我有一个不会显示的Google地图。这个问题似乎在FF& Chrome浏览器，但在IE浏览器（甚至是最新版本）中甚至更糟糕。
在FF& Chrome我有位置的问题：相对; css元素样式。只要我切换到（使用开发工具） position：absolute（或：fixed）; FF中的所有内容都可以正常显示。在Chrome浏览器中，地图只显示30％（从顶部开始）。
在IE中，地图甚至没有加载过。
以下是< head> 中的脚本内容。内容仅用于测试，毫无意义。 注意：我只用这个来加载地图。
<！ - 内部脚本< head>标签 - > < script type =text / javascriptsrc =maps.google/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的子元素
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="maps.google/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地图不显示
发布评论