CODEWITHSUNDEEP
javascriptapigoogle-mapsconnection-timeout
code-mon
code-mon

Reputation: 71

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

I am trying a simple integration of the Google Map API onto a website. However I am getting this strange error.

Failed to load resource: net::ERR_CONNECTION_TIMED_OUT

Below is the code:

<!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>

I am using Google Chrome last modified 06/23/2020

Upvotes: 0

Views: 2369

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You have two typos.

  1. in the URL for the Google Maps Javascript API v3: https://maps.gooleapis.com/, should be: https://maps.googleapis.com/ (two g's in google). This causes the error in the title of your question: “Failed to load resource: net::ERR_CONNECTION_TIMED_OUT”

  2. a LatLngLiteral has a lng property for longitude, not long

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

should be:

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

code snippet:

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>

Upvotes: 1

Related Questions