Google maps HTML/JavaScript not displaying

Question

I have implemented a google map into my website (see Code below). However the map, and the images such as zoom in/out, do not render/load on Chrome, Firefox or Internet explorer. They work fine on Safari. I am using Bootstrap and interestingly the map loads when the browser is reduced to the size of a mobile device. However the images still do not load. I'm wondering if a potential issue is through the setting of the height/width? I have attached my CSS below also.

CSS

 #map {
      height: 100%;
      max-height: 600px;
      width: 100%;
      max-width: none;
    }

#floating-panel {
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Palatino Linotype", "Book Antiqua", serif;
  line-height: 30px;
  padding-left: 10px;
}

HTML and Javascript

<div id="floating-panel">
<b>Start: </b>
<input type="text" id="start">
<b>End: </b>
<input type="text" id="end" value="London, UK">
<button id="directions">Directions </button>
</div>
<div class="map" id="map"></div>
<script>
  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: {lat: 51.5074, lng: 0.1278}
    });
    directionsDisplay.setMap(map);

    var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    //document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('directions').addEventListener('click', onChangeHandler);
    //document.getElementById('end').addEventListener('change', onChangeHandler);
  }
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(foundYou, notFound);
  } else {
    alert('Geolocation not supported or not enabled.');
  }
  function notFound(msg) {
  //alert('Unable to find your location')
  }
  function foundYou(position) {
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        })
        var address = results[0].address_components[1].long_name+' '+results[0].address_components[0].long_name+', '+results[0].address_components[3].long_name
        $('.autoLink span').html(address).parent().show().click(function(){
          $('#start').val(address);
          calcRoute();
        });
      }
    } else {
      alert("Geocoder failed due to: " + status);
    }
  });
  }
  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>

and my API, which I have placed after </body>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjjv2XhU9dhy3Zn8SlwCqzz7NnXAbeY-o&callback=initMap"></script>

Answer 1

Ahh, I think I got it working. You had a couple of problems, mostly to do with the order you were loading things in. I removed the callback on your API request, and set an event to call initMap() after the API and DOM were loaded. I also moved your script to the top of the head, but it may work where you had it. And also important, the CSS you had set before would not let it display even if it did load. Changing those things seems to have fixed things.

 #map-canvas {
   height: 600px;
   width: 600px;
 }
 #floating-panel {
   background-color: #fff;
   padding: 5px;
   border: 1px solid #999;
   text-align: center;
   font-family: "Palatino Linotype", "Book Antiqua", serif;
   line-height: 30px;
   padding-left: 10px;
 }

<html>

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjjv2XhU9dhy3Zn8SlwCqzz7NnXAbeY-o"></script>
  <script type="text/javascript">

  var geocoder;

  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 15,
      center: {
        lat: 51.5074,
        lng: 0.1278
      }
    });
    directionsDisplay.setMap(map);

    var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    //document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('directions').addEventListener('click', onChangeHandler);
    //document.getElementById('end').addEventListener('change', onChangeHandler);
  }
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(foundYou, notFound);
  } else {
    alert('Geolocation not supported or not enabled.');
  }

  function notFound(msg) {
    //alert('Unable to find your location')
  }

  function foundYou(position) {
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    geocoder.geocode({
      'latLng': latlng
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          marker = new google.maps.Marker({
            position: latlng,
            map: map
          })
          var address = results[0].address_components[1].long_name + ' ' + results[0].address_components[0].long_name + ', ' + results[0].address_components[3].long_name
          $('.autoLink span').html(address).parent().show().click(function() {
            $('#start').val(address);
            calcRoute();
          });
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
    
  google.maps.event.addDomListener(window, 'load', initMap);
  </script>
</head>

<body>
  <div id="floating-panel">
    <b>Start: </b>
    <input type="text" id="start">
    <b>End: </b>
    <input type="text" id="end" value="London, UK">
    <button id="directions">Directions</button>
  </div>
  <div class="map" id="map-canvas"></div>

</html>

I also threw in some geocoding initialization for free.