Googleマップの下に位置するコンテンツ

私は必要なものであるlaiyng上にコンテンツのブロックを持つGoogleマップを持っています。Googleマップの下に位置するコンテンツ

私はGoogleマップの下にさらなるコンテンツを追加することができる必要があります。しかし、地図の下に座るために進行中の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

私のマシン上のFirefoxとChromeでは、そのdivはマップの下にあります。 – 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>

を使用すると、GoogleマップのJavaScript APIを使用している場合、あなたがすることができ、カスタムコントロールを作成することで、マップ上の要素を追加することができますそれについてもっと知る：https://developers.google.com/maps/documentation/javascript/controls#CustomControls

出典

2016-10-11 10:03:20 Titus

iframeはcodepenのためのもので、実際のソリューションではgoogle apiを使用しています。ありがとう、私はそれを試してみましょう。 – Derek

Googleマップの下に位置するコンテンツ

答えて

関連する問題