Einbetten von Google Maps als CSS-Overlay wird nicht korrekt geladen

Question

Ich versuche, eine Google Map in einem CSS-Overlay anzuzeigen. Das Problem ist: Die Google Map wird nicht richtig geladen. Der Marker ist gesetzt, aber die Karte mit Straßen und so weiter fehlt.

Ich habe eine erstellt.

Es muss ein Problem mit dem Laden sein.

Hat jemand eine Idee, warum das passiert?

Mein CSS-Code:

 .button { 
     width: 150px; 
     padding: 10px; 
     background-color: #FF8C00; 
     box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.2); 
     font-weight: bold; 
     text-decoration: none; 
    } 

    #cover { 
     position: fixed; 
     top: 0; 
     left: 0; 
     background: rgba(0, 0, 0, 0.6); 
     z-index: 5; 
     width: 100%; 
     height: 100%; 
     display: none; 
    } 

    #loginScreen { 
     height: 380px; 
     width: 340px; 
     margin: 0 auto; 
     position: relative; 
     z-index: 10; 
     display: none; 
     border: 5px solid #cccccc; 
     border-radius: 10px; 
     background-color: white; 
    } 
    #googlemap{ 
     height: 200px; 
     width: 200px; 
    } 

    #loginScreen:target, 
    #loginScreen:target + #cover { 
     display: block; 
     opacity: 2; 
    } 

    .cancel { 
     display: block; 
     position: absolute; 
     top: 3px; 
     right: 2px; 
     background: rgb(245, 245, 245); 
     color: black; 
     height: 30px; 
     width: 35px; 
     font-size: 30px; 
     text-decoration: none; 
     text-align: center; 
     font-weight: bold; 
    } 

HTML:

<div align="center"> 
<br>hello 
<br><a href="#loginScreen" class="button"> 
Click here to open Google Map</a></div> 
<div id="loginScreen"> 
<div id="googlemap"></div> 
<p>I am just a text for demonstration.</p> 
<a href="#" class="cancel">&times;</a> </div> 
<div id="cover"> </div> 

Javascript:

var label = 'B'; 
     var overlayContentString = 'Old house here.'; 
     var infoWindow = new google.maps.InfoWindow({content: overlayContentString}); 
    var myLatLng = {lat: 51.7124916, lng:8.435252}; 

    var map = new google.maps.Map(document.getElementById('googlemap'), { 
     zoom: 15, 
     center: myLatLng 
    }); 

    var marker = new google.maps.Marker({ 
     position: {lat:51.7124916, lng:8.435252}, 
     map: map, 
     title: 'My home!', 
     animation: google.maps.Animation.DROP 
    }); 

    marker.addListener('click', function() { infoWindow.open(map,marker);}); 

Answer 1

wenn Sie opacity: 0; anstelle von display:none; für #loginScreen sollte es funktionieren.

wenn Sie display verwenden möchten: keine; Sie müssen die Karte neu initialisieren, wenn Sie die div klicken und zeigen

hoffe, das hilft