使用HTML5完全不显示Google Maps API
[英]Google Maps API not showing at all using HTML5
问题描述
For the first time I'm trying to incorporate the Google Maps API into a website and it's not working at all. 
这是我第一次尝试将Google Maps API整合到网站中，但根本无法正常工作。 I can't tell if there's something wrong with the code and I'd like to rule that out before trying to create another API Key 我无法判断代码是否有问题，在尝试创建另一个API密钥之前，我想排除该错误
I've moved the tag around and tried different styling approaches, but it just doesn't show anything. 我已经移动了标签，并尝试了不同的样式方法，但是它什么也没显示。
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script async defer
src="https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap">
</script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
2 个解决方案
解决方案1
2 已采纳 2019-08-20 04:12:39
The URL in the script that you are using is incorrect. 您正在使用的脚本中的URL不正确。
You are using: https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap 您正在使用： https：//maps.googleapis/maps/api/js？key = AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY＆callback = initMap
The correct URL: https://maps.googleapis .com /maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap 正确的网址： https：//maps.googleapis .com / maps / api / js？key = AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY＆callback = initMap
Hope this helps! 希望这可以帮助！
解决方案2
1 2019-08-20 04:22:44
The below line was not added correctly, 以下行未正确添加，
It should be in this form 应该是这种形式
Below is the updated code in which map is working fine.. 下面是更新的代码，其中地图可以正常工作。
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap"
async defer></script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.