Google Maps API v3可以运行，但是为空 [英] Google Maps API v3 works, but is blank

问题描述

我查看了其他一些主题.执行代码后，您可以通过检查元素"/源代码看到它的正常运行，但是只显示一个空白屏幕.我觉得它与CSS有关，但是我在google maps api简介的入门"部分中满足了所有CSS要求.

I viewed a few other threads. When the code executes, you can see it's working and functioning properly via "Inspect Element"/source code, but it just shows a blank screen. I feel like it has something to do with the CSS, but I did all their CSS requirements in the "getting started" part of the google maps api introduction.

代码:

<div id="map-canvas"></div>



<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API-KEY&sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

当然，API-KEY替换为我的密钥，因为它是有效的，因此可以正常工作.

Of course, API-KEY is replaced with my key which works fine since it's valid.

然后是我的CSS:

html { height: 100%: ;}
body {
    background: #f5f5f5;
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
    line-height: 140%;
    font-size: 14px;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map-canvas { height: 100%; width: 100%; }

任何帮助将不胜感激！谢谢！

Any help would be greatly appreciated! Thank you!

推荐答案

我的CSS出现错误(如果看到html {}，它也有分号和冒号.

Ah there was an error in my CSS (if you see the html { }, it has a semi-colon and a colon as well.

我还必须确保父div的高度也为100％.

I also had to make sure the parent divs were at 100% height too.

这篇关于Google Maps API v3可以运行，但是为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！