0
我正尝试使用Google Maps JavaScript API来查找城市附近的酒店。该页面有一个地图元素，谷歌地图javascript API应该填写，但地图元素总是空白的，因为某些原因，即使我有一个initMap函数，由地图api的回调函数调用。Google Maps JavaScript API v3中的空白地图元素
即使在等待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密钥。另外，我在本地PC上打开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>
确实地图元素有尺寸吗？同样出现你从'file //：'协议运行这个。不能在文件协议（地理编码）中使用ajax方法。安装一个本地主机服务器并从那里运行 – charlietfl
请提供一个[最小，完整，测试和可读的示例]（http://stackoverflow.com/help/mcve），说明问题（包括任何必需的css） – geocodezip