I'm trying to use the Google Maps JavaScript API in order to find nearby hotels in a city. The page has a map element that the google maps javascript API is supposed to fill in but the map element is always blank for some reason, even though I have an initMap function which is called by the maps api's callback function.
Even after waiting 10 minutes the map element is still blank and isn't filled in.
The javascript console isn't showing any errors other than
GET file:///C:/favicon.ico net::ERR_FILE_NOT_FOUND
/C:/favicon.ico:1 GET file:///C:/favicon.ico net::ERR_FILE_NOT_FOUND
Note that I removed the API key from this code but when I really run it I use a working API key. Also, I'm opening the html file locally on my PC, the webpage is not online.
The HTML of my page:
<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>
