Google maps HTML/JavaScript не отображается

Question

Я внедрил карту google на свой сайт (см. Код ниже). Однако карта и изображения, такие как увеличение/уменьшение изображения, не отображают/не загружают Chrome, Firefox или Internet Explorer. Они отлично работают на Сафари. Я использую Bootstrap, и интересно, что карта загружается, когда браузер уменьшен до размера мобильного устройства. Однако изображения по-прежнему не загружаются. Мне интересно, если потенциальная проблема связана с настройкой высоты/ширины? Я также добавил свой CSS ниже.

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 и 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> 

и мой API, который я поставил после </body>

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

Answer 1

Ahh, я думаю, что я получил это работает. У вас было несколько проблем, в основном, с заказом, в котором вы загружали вещи. Я удалил обратный вызов вашего запроса API и установил событие для вызова initMap() после загрузки API и DOM. Я также переместил ваш скрипт на верхушку головы, но он может работать там, где у вас это было. А также важно, что CSS, который вы установили ранее, не позволит отображать его, даже если он загрузился. Кажется, что изменение этих вещей имеет фиксированные вещи.

#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>

Я также бросил в некоторой инициализации геокодирования бесплатно.