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>

It might have something to do with the max-width: none;. I switched it over to explicit widths and it worked after scripts loaded in the right order. See my answer below. — jdgregson
– jdgregson, Commented Apr 30, 2016 at 15:56
possible duplicate of Google Maps div not showing up in JSBin — geocodezip
– geocodezip, Commented Apr 30, 2016 at 16:45
possible duplicate of Google Maps API v3 | shows no map data — geocodezip
– geocodezip, Commented Apr 30, 2016 at 16:46
possible duplicate of Responsive Google Maps v3 - Cannot get 100% height — geocodezip
– geocodezip, Commented Apr 30, 2016 at 16:47

jdgregson · Accepted Answer · 2016-04-30 16:01:51Z

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.

This is a great solution, and it works fine when the map is set to 600px width and height. However when I try to stretch the google map by increasing its width (so that it will fit cleanly in the column on my website) it bugs out again!

Collectives™ on Stack Overflow

Google maps HTML/JavaScript not displaying

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related