Wenn ich mein Navigationsfenster auf meiner Webseite erweitere, wird die Google Map mit nichts angezeigt, sie erscheint nur grau. Nur wenn ich die Konsole öffne, erscheint die Karte. Was muss ich in meinen Code ändern, damit die Karte mit ihrem Marker und dem Ort, an den ich sie programmiert habe, angezeigt wird? Wenn Sie die Karte außerhalb des Panels platzieren, funktioniert sie perfekt. Wenn jemand vielleicht den Code erweitern könnte, den ich geschrieben habe, um zu helfen, wäre das großartig.Google Kartendaten werden nicht angezeigt, wenn ich das Akkordeonbedienfeld erweitere
HTML-Code:
<button class="accordion">Navigation</button>
<div class="panel">
<div id="map" style="width:60%;height:300px"></div>
</div>
CSS Code:
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
Script-Code:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas,mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
icon: "poi.png"
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script>
Ziehen Sie in Betracht, Ihren API-Schlüssel aus der URL in Ihrem Code zu entfernen. – BluePill