在谷歌地圖下的位置內容

我有一個谷歌地圖，有laiyng的內容塊，這是我所需要的。在谷歌地圖下的位置內容

我需要能夠在谷歌地圖下添加更多的內容..但我無法弄清楚如何讓進行的div容器坐在地圖下方。

我試着將位置設置爲靜態，但它不起作用？

下面是我的codepen： -

HTML。

<div id="content"> 

    <iframe id="gmap" width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=55.886721,-4.33651&amp;spn=0.011553,0.027466&amp;z=15&amp;output=embed"></iframe> 
    <div class="container overlap"> 
    <h1>Content</h1> 

    </div> 
</div> 

<div class="moreContent"> 

    <p>I would like to sit below the google map!</p> 

<div>

CSS。

#gmap { 
    position:absolute;top:0;left:0;z-index:1; 
} 
.overlap{ 
    position: relative; 
    z-index:2; 
    background: white; 
    height : 200px; 
    width : 200px; 
    margin-top: 100px; 
} 

.moreContent{ 
    /* How doi position this container? */ 
}

來源

2016-10-11 Derek

這個div確實位於我的機器上Firefox和Chrome的地圖下方。 – Rob

你可以做到這一點

.moreContent{ 
    position:absolute; 
    top:450px 
}

但更好的解決方案將不會在#gmap元素上使用position:absolute;。

此外，您正在使用iframe將地圖嵌入到您的網頁中，更好的解決方案是使用Google Maps JavaScript API。

這裏是我會做它：

#map{ 
 
    width: 600px; 
 
    height: 450px; 
 
} 
 

 
.overlap{ 
 
    position:absolute; 
 
    top:100px; 
 
    z-index:2; 
 
    background: white; 
 
    height : 200px; 
 
    width : 200px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <div id="map"></div> 
 
    
 
    <div class="container overlap"> 
 
     <h1>Content</h1> 
 
    </div> 
 
    <div class="moreContent"> 
 
     <p>I would like to sit below the google map!</p> 
 
    <div> 
 
    
 
    
 
    <script> 
 
     var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: 55.886721, lng:-4.33651}, 
 
      zoom: 15 
 
     }); 
 
     } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
 
    async defer></script> 
 
    </body> 
 
</html>

如果您使用的是谷歌地圖的JavaScript API，你可以通過創建自定義的控件添加在地圖上的元素，你可以在這裏找到更多關於：https://developers.google.com/maps/documentation/javascript/controls#CustomControls

來源

2016-10-11 10:03:20 Titus

iframe僅用於codepen，即時通訊在我的實際解決方案中使用google api。謝謝你，我會試試看。 – Derek

在谷歌地圖下的位置內容

回答

相關問題