Question

我正在尝试使用Google Maps JavaScript API查找某个城市的附近酒店。该页面有一个地图元素，谷歌地图javascript API应该填写，但地图元素由于某种原因总是空白，即使我有一个由地图api的回调函数调用的initMap函数。

即使在等待10分钟后，地图元素仍为空白且未填写。

除了

之外，javascript控制台没有显示任何错误

GET file:///C:/favicon.ico net::ERR_FILE_NOT_FOUND
/C:/favicon.ico:1 GET file:///C:/favicon.ico net::ERR_FILE_NOT_FOUND

请注意，我从此代码中删除了API密钥，但是当我真正运行它时，我使用了一个有效的API密钥。另外，我在我的电脑上打开本地的html文件，网页不在线。

我的网页的HTML：

<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<title>OmniTravel | Start</title>
<!-- Bootstrap stuff -->
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-theme.css">
    <link rel="stylesheet" href="background.css">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'> <!-- Lato -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <!-- Open Sans -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

        var map;
        var infowindow;

        function initMap() {
         var pyrmont = {lat: -33.867, lng: 151.195};

          map = new google.maps.Map(document.getElementById('map'), {
            center: pyrmont,
            zoom: 15
          });


          infowindow = new google.maps.InfoWindow();

        }



        function createMarker(place) {
          var placeLoc = place.geometry.location;
          var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
          });

          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
          });
        }

        var cityCoordinates;
        function findHotels()
        {
            var nearbyHotels = [];
            var nearbyHotelsLat = [];
            var nearbyHotelsLong = [];

            var geocoder = new google.maps.Geocoder();
            var cityAddress = document.getElementById('locations_cityField').value;

            geocodeAddress(geocoder, cityAddress);
            setTimeout(function(){
                var coordSplit = cityCoordinates.split(",");

                var lati = parseFloat(coordSplit[0]);
                var lngi = parseFloat(coordSplit[1]);

                var city = {lat: lati, lng: lngi};

                var service = new google.maps.places.PlacesService(map);
                  service.nearbySearch({
                    location: city,
                    radius: 500,
                    types: ['lodging']
                  }, callback);



            }, 5000);



        }

        function callback(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
              console.log(results[i]);
              createMarker(results[i]);
            }
          }
        }

        function initSearchButtonListener()
        {


            document.getElementById('button_searchhotels').addEventListener('click', function() {
                findHotels();
              });

            initMap();
        }


        function geocodeAddress(geocoder, address) {
            console.log("address " + address);
            console.log("geocoder " + geocoder);
          geocoder.geocode({'address': address}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                var coords = results[0].geometry.location.toString();

                var coordsNoFirst = coords.substring(1);
                var coordsNoLast = coordsNoFirst.slice(0, -1);
                cityCoordinates = coordsNoLast;
                console.log(cityCoordinates);

            } else {
              alert('Could not convert your city address to latitude/longitude for the google maps API: ' + status);
            }
          });
        }





    </script>

</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" style ="font-family: Lato">OmniTravel</a>
  </div>
      <div>
          <ul class="nav navbar-nav">
            <li><a href="index.html" style ="font-family: Open Sans">Home</a></li>
            <li class="active"><a href="start.html" style ="font-family: Open Sans">Start</a></li>
            <li><a href="legal.html" style ="font-family: Open Sans">Legal</a></li>
          </ul>
      </div>
  </div>
</nav>
<br></br>
<div style="text-align:center; background-image: url(image/sanfransiscobaybridge.jpg); background-repeat: no-repeat;">
    <br></br>
    <h2 style ="color:white; font-family: Open Sans; font-weight: light;">Enter up to 5 different locations you would like to visit:</h2>
    <p style ="font-family: Open Sans">OmniTravel will look for the best hotel closest to each of the locations.</p>
    <div class="container" id="locations">
            <div class="row">

                <div class="col-md-6">
                    <input type="text" class="form-control" id="locations_location1" placeholder="Enter address of the 1st location">
                </div>

                <div class="col-md-6">
                    <input type="text" class="form-control" id="locations_location2" placeholder="Enter address of the 2nd location">
                </div>

            </div>
            <br></br>
            <div class="row">

                <div class="col-md-6">
                    <input type="text" class="form-control" id="locations_location1" placeholder="Enter address of the 3rd location">
                </div>

                <div class="col-md-6">
                    <input type="text" class="form-control" id="locations_location2" placeholder="Enter address of the 4th location">
                </div>

            </div>
            <br></br>
            <div class="row" style="text-align:center">

                <div class="col-md-6">
                    <input type="text" class="form-control" id="locations_location2" placeholder="Enter address of the 5th location">
                </div>

            </div>
            <br></br>
                <div id="locationField">
                    <input type="text" class="form-control" id="locations_cityField" placeholder="Enter a city" type="text" />
                </div>



            <div id="map"></div>    
            <button id="button_searchhotels" class="btn btn-success btn-lg">Search</button>

    </div>







</div>
<br></br>
<br></br>
<div style="text-align:center" id="displayHotelsDiv">

</div>


<div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
            </div>
</div>



    <script src="https://maps.googleapis.com/maps/api/js?key=[removed]&signed_in=true&libraries=places&callback=initSearchButtonListener"
            async defer></script>


</body>

Answer 1

ico的错误与在指定路径中找不到文件的事实有关..您可以删除以进行测试..

并尝试向地图div容器添加固定尺寸，例如：

 <div id="map" style="width: 300px; height: 300px;"></div>

Google Maps JavaScript API v3

1 个答案: