Question

我从谷歌复制了代码，但我有一个空白页面...我做错了什么？ http://raidsnature.com/raidsnature/raidsnature.nsf/googlemap4

非常感谢！

PS：“Google Maps API v3”已激活，API密钥（于2013年4月30日下午12:42激活）仍可在我的旧页面v2上运行： http://raidsnature.com/raidsnature/raidsnature.nsf/GoogleMap?OpenPage&Raid=1&Trail=1&CO=1

这里的代码不起作用：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCklzGa0v5sp8cWNLXnEZph20tKa_rXups&sensor=false" type="text/javascript"></script>

    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

您缺少Google示例的CSS部分，（如geocodezip所说）将定义地图画布大小，但您还需要定义html和body高度。

引用Google's Hello World example：

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>

此CSS声明表明地图容器（名为map-canvas）应占用HTML正文高度的100％。请注意，我们还必须明确声明<body>和<html>的百分比。

可以在Google Maps API docs找到完整的工作示例（转到第二个标签“JavaScript + HTML”）。

Google地图v3的Google示例的空白屏幕

1 个答案: