映射Javascript API问题:;未能加载资源:net::ERR_CONNECTION_TIMED_OUT&quo



我正在尝试将GoogleMapneneneba API简单集成到网站上。然而,我得到了这个奇怪的错误。

加载资源失败:net::ERR_CONNECTION_TIMED_OUT

下面是代码:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<style >
*{
margin:0;
padding:0;
}
#maps{
height: 500px;
width: 100%;
}
</style>
<title>Test GoogleAPI</title>
</head>
<body>
<div class="maps" id="maps"></div>
<script>
function initMap() {
var location = {lat: 17.4875, long: 78.3953};
var map = new google.maps.Map(document.getElementById('maps'),
{
zoom: 8,
center: location
}
);
}
</script>
<script async defer src="https://maps.gooleapis.com/maps/api/js?key=AIzaSyA4T7iyDoU4afVBV-TTTxsEv333****I&callback=initMap"></script>
</body>
</html>

我使用的是谷歌Chrome,上次修改时间为2020年6月23日

您有两个打字错误。

Google Maps Javascript API v3:https://maps.gooleapis.com/的URL中的
  1. 应为:https://maps.googleapis.com/(Google中的两个g(。这导致问题标题中出现错误:"加载资源失败:net::ERR_CONNECTION_TIMED_OUT">

  2. LatLngLiteral具有经度的lng属性,而不是long

var location = {lat: 17.4875, long: 78.3953};

应该是:

var location = {lat: 17.4875, lng: 78.3953};

代码片段:

function initMap() {
var location = {
lat: 17.4875,
lng: 78.3953
};
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 8,
center: location
});
}
* {
margin: 0;
padding: 0;
}
#maps {
height: 500px;
width: 100%;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<div class="maps" id="maps"></div>

最新更新