Google지도

-1

모든 코드가 여기에 당신이, 로컬로 실행 단지 qibla.html을 열 수 부트 스트랩 열의 얇은 행을 표시합니다 여기 :Google지도

Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag

내 부트 스트랩 예에서 볼 수 있지만 나를 위해 그냥 아주 얇은 선이다. 여기에서 어디로 가야할지 모르겠습니다. 상대 크기 조정을 유지하면서 표시하려면 어떻게해야합니까? 픽셀은 작동하지만 반응이 좋기를 원합니다.

편집 : 여기에 요청 JSFiddle의 사람이다 : https://jsfiddle.net/ygsfeba9/

는 그리고 여기처럼 HTML이 어떻게 표시되는지를 보여줍니다 : 당신은 absolute로 설정 #map 위치가 없어야합니다

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <h1 class="text-center">Interactive Qibla Finder</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-8"> 
     <div id="map"></div> 
     </div> 
     <div class="col-md-4"> 
     <p>Blah blah blah, here's where the controls and output will go.</p> 
     </div> 
    </div> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
    var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 0, lng: 0}, 
    zoom: 1 
    }); 
} 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAnAdXjgiEX08RLBbMle9X_WWN4BzNHBg&callback=initMap" 
    async defer></script> 
</body>

출처

2017-10-06 Sadiq

최소 예를 만듭니다. –

GitHub – Sadiq

에있는 코드에 최소한의 예가 있습니다. 모두가 있습니다 ... – Sadiq

상대 단위를 사용하여 가장 좋은 결과는 다음과 CSS로 나타납니다 :

#map { 
    width: 100%; 
    height: 75vh; 
}

바꿔 수직 높이 단위는 맛.

출처

2017-10-06 22:25:10 Sadiq

. 그렇게하면 상위 요소 col-md-8을 상대 위치로 만들고 높이 속성이 500px 정도가되어야합니다.

#map { 
    width: 100%; 
    height: 500px; 
}

fiddle

출처

2017-10-06 22:16:17

신장이있는 상대를 가질 방법이 있습니까? – Sadiq

백분율로 표시 – Sadiq

뷰포트에 따라 'vh'단위가 있습니다. '# map'은 (SDK에 의해 생성 된) 절대 요소를 포함합니다. –

답변

관련 문제