Google Maps API V3 API 密钥未加载答案

【问题标题】：Google Maps API V3 API Key not loadGoogle Maps API V3 API 密钥未加载
【发布时间】：2017-04-27 11:37:58
【问题描述】：

我的 Javascript 和 API KEY 有问题。我只希望这段代码在浏览器中显示地图，但仍然找不到 API KEY。

我之前用过几次谷歌地图，但我没有这些问题。

希望你能帮帮我！

这是我的代码

<!DOCTYPE html>
<html>
<head >

    <title>maps</title>
    <style type="text/css">
        body {
            height: 100%;
            margin: 0;
            padding: 0
        }
    </style>
</head>
<body>



<!-- Load the Google API: -->

 <script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
var map = {};    
var mapCenter = new google.maps.LatLng(51.0, 1.5); 
var trackList = [];  
var trackSymbolSize = 1.0; 

var MAX_NUMBER_OF_TRACKS = 100000;
var EXCEPTION_AT_LOGICAL_ERROR = true;
var CONSOLE_LOG = true;

function initMap() {
    var mapProp = {
        center: mapCenter,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    document.getElementById("googleMap").style.height = innerHeight + 'px';
    document.getElementById("googleMap").style.width = innerWidth + 'px';

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

function browserResize() {
    document.getElementById("googleMap").style.height = innerHeight + 'px';
    document.getElementById("googleMap").style.width = innerWidth + 'px';

    google.maps.event.trigger(map, 'resize');
}

</script>

<script>

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

</script>

<div id="googleMap"></div>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZVG0Z9Ei7ubm5bkAfPsYUI-Wm8C_c-0&callback=initMap" async defer></script>

</body>

</html>

【问题讨论】：

删除上面的<script src="http://maps.googleapis.com/maps/api/js"></script>，因为它已经包含在下面的键中
在我看来，您已经包含了两次 map api javascript，一次没有键（在顶部），可能第二次没有重新加载它？
照@Deep3015 所说的去做......去做吧！！！
是的，我已经这样做了，但它也没有显示任何内容。
控制台中的错误是：Uncaught ReferenceError: google is not defined at mapkarte.html:71

标签： javascript api google-maps google-maps-api-3

【解决方案1】：

像这样试试。

<!DOCTYPE html>
<html>

<head>

  <title>maps</title>
  <style type="text/css">
    body {
      height: 100%;
      margin: 0;
      padding: 0
    }
  </style>
  <!-- Load the Google API: -->

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZVG0Z9Ei7ubm5bkAfPsYUI-Wm8C_c-0&callback=initMap" async defer></script>
</head>

<body>
  <div id="googleMap"></div>
  <script>
    var map = {};
    var mapCenter
    var trackList = [];
    var trackSymbolSize = 1.0;

    var MAX_NUMBER_OF_TRACKS = 100000;
    var EXCEPTION_AT_LOGICAL_ERROR = true;
    var CONSOLE_LOG = true;

    function initMap() {
      mapCenter = new google.maps.LatLng(51.0, 1.5);
      var mapProp = {
        center: mapCenter,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };


      document.getElementById("googleMap").style.height = innerHeight + 'px';
      document.getElementById("googleMap").style.width = innerWidth + 'px';

      map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }

    function browserResize() {
      document.getElementById("googleMap").style.height = innerHeight + 'px';
      document.getElementById("googleMap").style.width = innerWidth + 'px';

      google.maps.event.trigger(map, 'resize');
    }
  </script>


</body>

</html>

【讨论】：