地图 Javascript API 问题："Failed to load resource: net::ERR_CONNECTION_TIMED_OUT"

Question

我正在尝试将 Google 地图 API 简单地集成到一个网站上。但是我收到了这个奇怪的错误。

Failed to load resource: 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>

我正在使用 Google Chrome 最后修改时间 06/23/2020

Answer 1

你有两个错别字。

中的URL for the Google Maps Javascript API v3：https://maps.gooleapis.com/，应该是：https://maps.googleapis.com/（google中的两个g）。这会导致问题标题中出现错误：“无法加载资源：net::ERR_CONNECTION_TIMED_OUT”
a 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>

地图 Javascript API 问题："Failed to load resource: net::ERR_CONNECTION_TIMED_OUT"

Maps Javascript API issue: "Failed to load resource: net::ERR_CONNECTION_TIMED_OUT"

javascript

api

google-maps

connection-timeout