我正在尝试制作一个带有一些标记的简单谷歌地图网页，但它没有显示标记，它一直给我这个错误：
未捕获的ReferenceError：谷歌未定义
我已经查找了解决方案，并且有人说我必须在任何事情之前加载谷歌地图库，但我不知道该怎么做。
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&callback=initMap">
</script>
<script>
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'),{
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
//var markers = locations.map(function(location, i) {
// return new google.maps.Marker({
// position: location,
// label: labels[i % labels.length]
// });
// });
}
//jordan states locations
var locations = [
[31.8354533 , 35.6674337 ],
[ 31.186446 , 35.6248844 ],
[ 30.8071736 , 35.5228078 ],
[ 32.0522945 , 35.9935951 ],
[ 31.7157524 , 35.7633807 ],
[ 32.0321557 , 35.655972 ],
[ 32.3402518 , 36.1527321 ],
[ 32.2699656 , 35.824437 ],
[ 32.3415654 , 35.7322292 ],
[ 32.5525113 , 35.81239 ],
[ 30.2200923 , 35.5467541 ],
[ 29.5809744 , 34.9350487 ]
]
for (var i = 0; i < locations.length; i++) {
// var coords = locations[i];
var latLng = new google.maps.LatLng(croods[0],croods[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
</body>
</html>
答案 0 :(得分：0)
当您异步加载API时（使用async defer），您需要全部依赖于回调函数（initMap）内的API的代码。目前，将标记放在地图上的代码不在该函数之内。
（一旦解决了这个问题，你就会遇到一些错误：Uncaught ReferenceError: croods is not defined）
代码段
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&callback=initMap"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
//var markers = locations.map(function(location, i) {
// return new google.maps.Marker({
// position: location,
// label: labels[i % labels.length]
// });
// });
//jordan states locations
var locations = [
[31.8354533, 35.6674337],
[31.186446, 35.6248844],
[30.8071736, 35.5228078],
[32.0522945, 35.9935951],
[31.7157524, 35.7633807],
[32.0321557, 35.655972],
[32.3402518, 36.1527321],
[32.2699656, 35.824437],
[32.3415654, 35.7322292],
[32.5525113, 35.81239],
[30.2200923, 35.5467541],
[29.5809744, 34.9350487]
]
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
</script>