未定义的Google未定义referenceError

Question

请帮助我调试为什么Chrome无法识别google。 我收到此错误：

未捕获的ReferenceError：未定义google

我已经将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>

Answer 1

您正在异步加载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>

Answer 2

您不应该将Google地图事件放在$(document).ready(); 因为window.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>

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

未定义的Google未定义referenceError

问题描述

2 个解决方案

解决方案1
1 2015-10-16 16:31:25

解决方案2
1 2015-10-16 16:42:10

未定义的Google未定义referenceError

问题描述

2 个解决方案

解决方案1 1 2015-10-16 16:31:25

解决方案2 1 2015-10-16 16:42:10

解决方案1
1 2015-10-16 16:31:25

解决方案2
1 2015-10-16 16:42:10