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

해당 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>

당신은 당신이 할 수있는, 사용자 지정 컨트롤을 작성하여지도 요소를 추가 할 수 있습니다 Google지도 자바 스크립트 API를 사용하는 경우 여기에 대한 자세한 내용은 여기를 참조하십시오. https://developers.google.com/maps/documentation/javascript/controls#CustomControls

출처

2016-10-11 10:03:20 Titus

iframe은 codepen 용이며, 실제 솔루션의 Google API를 사용하고 있습니다. 고마워, 한번 시도해 볼께. – Derek

Google지도 아래 위치 콘텐츠

답변

관련 문제