未捕获的引用错误google未定义

Uncaught referenceError google is not defined

本文关键字：错误 google 未定义 引用      更新时间：2023-09-26

请帮助我调试为什么Chrome不识别谷歌。我得到这个错误:

Uncaught ReferenceError: google is not defined

我已经将API脚本移动到顶部，失败。我调整了自己的代码来匹配Google的文档，失败了。它是Chrome，是导致我的问题?

<!DOCTYPE html>
<html>
<head>
    <title>weather map</title>
    <style type="text/css">
    html, body {
        margin: 0;
    }
    #map-canvas {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
        <h1>Map Test</h1>
        <div id="map-canvas">
        </div>
    </div>
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            google.maps.event.addDomListener(window, 'load', initMap);
        });
        var map; 
        function initMap() {        
            map = new google.maps.Map(document.getElementById("map-    canvas"), {
                center: {lat: 29.423017, lng: -98.48527},
                zoom: 8,
            });
        }
    </script>
    <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_WAS_HERE_&callback=initMap">
    </script>
</body>
</html>

您正在异步加载Google Maps Javascript API。在initMap(回调)函数运行之前，您不能使用它的任何方法。

工作小提琴

代码片段:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map-canvas"), {
    center: {
      lat: 29.423017,
      lng: -98.48527
    },
    zoom: 8
  });
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
#map-canvas {
  width: 100%;
  height: 100%;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<div id="container" style="height:100%; width:100%;">
  <h1>Map Test</h1>
  <div id="map-canvas"></div>
</div>

你不应该把你的谷歌地图事件在$(document).ready();自窗口。Load已经注册了一个事件监听器，这应该足够了。

你的google maps脚本标签也应该在你的JavaScript代码上面，事件监听器也应该移动到函数下面。

<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_WAS_HERE_&callback=initMap">
</script>
<script type="text/javascript">
    var map; 
    function initMap() {        
        map = new google.maps.Map(document.getElementById("map-    canvas"), {
            center: {lat: 29.423017, lng: -98.48527},
            zoom: 8,
            });
        }
    google.maps.event.addDomListener(window, 'load', initMap);
</script>

下次你应该更彻底地阅读文档

相关文章：