Javascript 谷歌地图API没有显示我的地图，即使我有正确的身份验证密钥_Javascript_Google Maps Api 2

Javascript 谷歌地图API没有显示我的地图，即使我有正确的身份验证密钥

javascript

Javascript 谷歌地图API没有显示我的地图，即使我有正确的身份验证密钥,javascript,google-maps-api-2,Javascript,Google Maps Api 2,在Google chrome浏览器中加载代码时，Google API地图不显示。我在谷歌云平台上的一个新项目中使用创建了身份验证密钥我曾尝试通过创建一个新项目在谷歌云平台上生成一个新的身份验证密钥，但这似乎不起作用 <!DOCTYPE html> <html lang="en"> <head> <style> #map{ height:100%; } </style> <meta charset=

在Google chrome浏览器中加载代码时，Google API地图不显示。我在谷歌云平台上的一个新项目中使用创建了身份验证密钥

我曾尝试通过创建一个新项目在谷歌云平台上生成一个新的身份验证密钥，但这似乎不起作用

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
  #map{
     height:100%;
  }
  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="output">Complete JavaScript Course </div>
<div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js? 
 key=<<my key>>"></script>
 <script src="app.js">

  window.onload = init;
      var m = document.getElementById('map');

      function init() {
          navigator.geolocation.getCurrentPosition(placeMap);
      }

      function placeMap(data) {
          var options = {
              center: {
                  lat: data.coords.latitude
                  , lng: data.coords.longitude
              }
              , zoom: 5
          }
          var map = new google.maps.Map(m, options);
          console.dir(data);
      }

</script>

</body>
</html>


#地图{
身高：100%；
}
文件
完成JavaScript课程
window.onload=init；
var m=document.getElementById（'map'）；
函数init（）{
navigator.geolocation.getCurrentPosition（placeMap）；
}
功能位置图（数据）{
变量选项={
中心：{
纬度：数据坐标纬度
，lng:data.coords.longitude
}
，缩放：5
}
var map=newgoogle.maps.map（m，选项）；
console.dir（数据）；
}

正如我已经说过的，google map api不会显示我实际位置的地图。

您需要在google maps加载后使用回调访问api。这是通过将

callback

作为查询参数传递给google maps初始化来完成的。您还需要激活api才能拥有Javascript功能


简单地图
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
var映射；
函数初始化映射（位置）{
map=new google.maps.map（document.getElementById（'map'）{
中锋:位置,，
缩放：8
});
}
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（（位置）=>{
初始映射({
lng:position.coords.longitude，lat:position.coords.lation}）；
});
}否则{
初始映射（{lat:-34.397，lng:150.644}）；
}
}

发布的代码有两个问题

您的地图div没有大小，您需要定义

html

和

body

的大小，以便

#map

100%高度可以参考：

应该是：

<style>
html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

<script>

完成JavaScript课程
window.onload=init；
var m=document.getElementById（'map'）；
函数init（）{
navigator.geolocation.getCurrentPosition（placeMap）；
}
功能位置图（数据）{
变量选项={
中心：{
纬度：data.coords.latitude，
lng:data.coords.longitude
},
缩放：5
}
var map=newgoogle.maps.map（m，选项）；
console.dir（数据）；
}

api可能还没有准备好，而不是window.load。您是否尝试过使用它们提供的回调？您的意思是什么？它应该在什么时候准备好？基本上是您正在使用的google api，接受另一个参数以及作为回调的apiKey，当api准备好使用时将调用它，这里的更多信息您是否真的在使用已弃用且已关闭的v2版本的API（正如您的标记所暗示的）？同步加载v3（以及已弃用和关闭的v2api）可以正常工作。如果您愿意，您可以异步加载它（他们的大多数示例都是这样做的）。花了好几个小时试图找到什么让我的旧网页显示谷歌地图，而我的新网页却没有。我在CSS中从#map切换到了.map，并且没有在map div上添加id。我也没有明确标注map div的高度，因为它是一个网格区域，我假设高度为：auto；可以。

<style>
html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

<script src="app.js">

<script>