Question

我想使用v3 api嵌入Google地图：

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="map"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&key=mykey&sensor=false&region=DE"></script>
    <script>
      new google.maps.Map(document.querySelector('div.map'), {
        zoom: 4, center: new google.maps.LatLng(0, 0)
      });
    </script>
  </body>
</html>

结果是它成功加载了所有ajax并将它们渲染到 div.map 中，但是地图是米色/灰色并且缺少控件。

注意：

key = mykey 是我的api密钥的占位符
document.querySelector 返回匹配的元素节点并在我的浏览器上工作
允许省略地图类型，因为 ROADMAP 是默认
您不必将逻辑放入加载事件包装器中，因为它位于文档末尾

所以请不要对上述内容提出任何建议 - 我已经尝试过了！

那么我做错了什么？

博多

Answer 1

每个documnetation

都需要

mapTypeId

mapTypeId MapTypeId初始Map mapTypeId。的必需。

<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8" /> </head> <body> <div class="map" style="height:500px; wiodth:600px;"></div> <script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&region=DE"></script> <script> new google.maps.Map(document.querySelector('div.map'), { zoom: 4, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP }); </script> </body> </html>

working example

Answer 2

根据Google's examples，添加一些CSS以使地图以特定大小显示：

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

尝试将地图分配给变量：

var map = new google.maps.Map(...)

Google地图呈现灰色/米色方框

2 个答案: