Javascript 未捕获引用错误google未定义_Javascript_Jquery_Google Maps

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

javascript jquery google-maps

Javascript 未捕获引用错误google未定义,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,请帮我调试为什么Chrome无法识别google。我得到这个错误：未捕获引用错误：未定义google 我已将API脚本移到顶部，失败。我调整了自己的代码以匹配谷歌的文档，失败了。是铬造成了我的问题吗 <!DOCTYPE html> <html> <head> <title>weather map</title> <style type="text/css"> html, body {

请帮我调试为什么Chrome无法识别google。我得到这个错误：

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

我已将API脚本移到顶部，失败。我调整了自己的代码以匹配谷歌的文档，失败了。是铬造成了我的问题吗

<!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>


天气图
html，正文{
保证金：0；
}
#地图画布{
宽度：100%；
身高：100%；
}
地图测试
$（文档）.ready（函数（）{
google.maps.event.addDomListener（窗口'load'，initMap）；
});
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（“map-canvas”）{
中心：{lat:29.423017，lng:-98.48527}，
缩放：8，
});
}

您正在异步加载Google Maps Javascript API。在

initMap

（回调）函数运行之前，不能使用它的任何方法

代码片段：

var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（“地图画布”）{
中心：{
纬度：29.423017，
液化天然气：-98.48527
},
缩放：8
});
}

html，
身体{
保证金：0；
宽度：100%；
身高：100%；
}
#地图画布{
宽度：100%；
身高：100%；
}


地图测试

您不应该将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>


var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（“map-canvas”）{
中心：{lat:29.423017，lng:-98.48527}，
缩放：8，
});
}
google.maps.event.addDomListener（窗口'load'，initMap）；

下次您应该更彻底地阅读文档。
控制台是否会告诉您哪行代码导致引用错误？请尝试从脚本标记中删除“延迟”。延迟阻止脚本标记在解析DOM之前执行。由于$（document）.ready函数出现在脚本标记之前，它将首先尝试执行。或者将maps.googleapis的脚本标记移到$（document）.ready函数上方。Vincent，它说这一行是问题所在：
google.maps.event.adddomstener（窗口“load”，initMap）；