Embedding Google Maps as CSS Overlay doesn't l

Question

I try to display a Google Map in an CSS Overlay. The problem is: The Google Map doesn't load properly. The marker is set, but the map with streets and so on is missing.

I created a JSFiddle to show my problem.

There has to be an Issue with loading.

Has anybody an idea why this happens?

My 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

if you use opacity: 0; instead of display:none; for #loginScreen it should work.

if you want to use display:none; you have to re-initialize the map when you click and show the div

hope this helps