请帮助我调试 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
(回调)函数运行之前,您不能使用它的任何方法。
代码片段:
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/