Maps Javascript API 问题：“无法加载资源：net::ERR_CONNECTION_TIMED_OUT”答案

【问题标题】：Maps Javascript API issue: "Failed to load resource: net::ERR_CONNECTION_TIMED_OUT"Maps Javascript API 问题：“无法加载资源：net::ERR_CONNECTION_TIMED_OUT”
【发布时间】：2020-07-15 12:18:13
【问题描述】：

我正在尝试将 Google Map 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>

我使用的是谷歌浏览器，上次修改时间为 2020 年 6 月 23 日

【问题讨论】：

标签： javascript api google-maps connection-timeout

【解决方案1】：

你有两个错别字。

在URL for the Google Maps Javascript API v3：https://maps.gooleapis.com/，应该是：https://maps.googleapis.com/（谷歌中有两个g）。这会导致您的问题标题出现错误：“无法加载资源：net::ERR_CONNECTION_TIMED_OUT”
LatLngLiteral 具有 lng 经度属性，而不是 long

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

应该是：

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

代码 sn-p：

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>

【讨论】：