Google Maps HTML/JavaScript wird nicht angezeigt

Question

Ich habe eine Google Map in meine Website implementiert (siehe Code unten). Die Karte und die Bilder, z. B. Vergrößern/Verkleinern, werden jedoch nicht in Chrome, Firefox oder Internet Explorer gerendert. Sie funktionieren gut auf Safari. Ich benutze Bootstrap und interessanterweise lädt die Karte, wenn der Browser auf die Größe eines mobilen Geräts reduziert wird. Die Bilder werden jedoch immer noch nicht geladen. Ich frage mich, ob ein potenzielles Problem durch die Einstellung der Höhe/Breite ist? Ich habe mein CSS auch unten angehängt.

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

und meine API, die ich gestellt habe nach </body>

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

Answer 1

Ahh, ich glaube, ich habe es funktioniert. Sie hatten ein paar Probleme, vor allem mit der Reihenfolge, in der Sie die Objekte geladen haben. Ich habe den Rückruf Ihrer API-Anfrage entfernt und ein Ereignis gesetzt, um initMap() aufzurufen, nachdem die API und das DOM geladen wurden. Ich habe auch dein Skript auf den Kopf gestellt, aber es könnte funktionieren, wo du es hast. Und auch wichtig, das CSS, das Sie zuvor eingestellt hatten, ließ es nicht anzeigen, selbst wenn es geladen wurde. Diese Dinge zu ändern scheint Dinge zu reparieren.

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

Ich warf auch in einiger Geokodierung Initialisierung kostenlos.