无法正确加载Google地图作为CSS叠加层 [英] Embedding Google Maps as CSS Overlay doesn't load properly

问题描述

我尝试在CSS叠加层中显示Google地图。
问题是：Google地图无法正常加载。

我创建了一个 JSFiddle显示我的问题。

加载时出现问题。

有人知道为什么会发生这种情况吗？

我的CSS代码：

  .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 =＃loginScreenclass =button> 
点击这里打开Goog​​le地图< / a>< / div> 
< div id =loginScreen> 
< div id =googlemap>< / div> 
< p>我只是一个演示文字。< / p> 
< a href =＃class =cancel>& times;< / a> < / div> 
< div id =cover> < / div> 
  

Javascript：

 code> 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：我的家！'，
 animation：google.maps.Animation.DROP 
}）; 
 
 marker.addListener（'click'，function（）{infoWindow.open（map，marker）;}）;如果你使用 opacity：
  c>  $ b   
 $ b  
 $ 
如果要使用display：none;您必须在点击并显示div时重新初始化地图
 
 
 
希望这有助于
 
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);});

解决方案
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

                        
这篇关于无法正确加载Google地图作为CSS叠加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！