javascript - Uncaught referenceError google is not defined

标签 javascript jquery google-maps

请帮助我调试 Chrome 无法识别谷歌的原因。 我收到此错误:

Uncaught ReferenceError: google is not defined

我已将 API 脚本移动到顶部,失败。 我调整了自己的代码以匹配谷歌的文档,失败了。 是 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(回调)函数运行之前,您不能使用它的任何方法。

working fiddle

代码片段:

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>

关于javascript - Uncaught referenceError google is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33174540/

相关文章:

javascript - Kendo Grid 延迟初始化后绑定(bind)点击事件

google-maps - 使用 angular2 谷歌地图添加动态线

javascript - 地理编码限制问题

javascript - 使用 jQuery 获取范围内的 sibling

javascript - 如何修复 Heroku 中的 window.open() 问题?

javascript - 从对象到具有嵌套对象的数组

javascript - 如何检查ram消耗javascript

javascript - JQuery UI 全尺寸日历 - 从 PHP 获取 JSON 数据

java - 设置 setMylocationenable(true) 时无法获取谷歌地图 fragment 中的 Activity 上下文

javascript - Skrollr 视差在移动设备上不起作用