title: Google maps HTML/JavaScript not displaying
body: <p>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.</p>
  
  <p>CSS</p>
  
  <pre><code> #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;
  }
  </code></pre>
  
  <p>HTML and Javascript</p>
  
  <pre><code>&lt;div id="floating-panel"&gt;
  &lt;b&gt;Start: &lt;/b&gt;
  &lt;input type="text" id="start"&gt;
  &lt;b&gt;End: &lt;/b&gt;
  &lt;input type="text" id="end" value="London, UK"&gt;
  &lt;button id="directions"&gt;Directions &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="map" id="map"&gt;&lt;/div&gt;
  &lt;script&gt;
    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);
        }
      });
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>and my API, which I have placed after <code>&lt;/body&gt;</code></p>
  
  <pre><code>&lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjjv2XhU9dhy3Zn8SlwCqzz7NnXAbeY-o&amp;callback=initMap"&gt;&lt;/script&gt;
  </code></pre>