Google지도가 트위터 부트 스트랩과 간섭하는 경우

부트 스트랩을 사용하는 페이지가 있고지도 (API v3)를 추가했습니다.Google지도가 트위터 부트 스트랩과 간섭하는 경우

처음에는 잘 작동하지만지도를 접을 때 다시 열 수 없습니다.

비슷한 질문을 살펴 보았지만이 문제를 해결할 수 없습니다.

내 HTML :

이

<div id="mapHeader" data-toggle="collapse" data-target="#map"> 
    Header 
</div> 
<div id="map" class="collapse in"> 
    <div id="map_canvas"></div> 
</div>

CSS :

이

#map_canvas { height: 100% } 
#map {height: 30em; width: 50%;max-height:100%;}

자바 스크립트는지도를로드합니다.

출처

2012-11-25 JNF

콘솔에서 resize 이벤트를 실행하고 수정했는지 확인하십시오. 'google.maps.event.trigger ($ ('map_canvas ') [0],'resize ')' – Oliver

고맙습니다 @ 올리버 작동하지 않았다. – JNF

A fiddle to demonstrate 문제는 그것에 확장하는 것을 높이 모르는 있도록 부트 스트랩 붕괴 플러그인지도 캔버스의 크기를 등록되지 않는 것입니다. 이 문제를 해결하려면 다음처럼 #map_canvas 일부 치수를 추가 :

#map_canvas { height: 30em; width: 100%; }

편집 : 영업 이익은 아래에 댓글을 달았 같이, 특정 높이가 접을 수있는 용기의 적절한 확장을 허용하도록 #map_canvas 용기 필요합니다.

출처

2012-11-25 15:34:36

나는 결코 그것을 이해하지 못했을 것이다. 내가 가지고있는 비율보다는 * 특정 * 높이가 필요하다는 것을 강조하기 위해 편집해야합니다. – JNF

@JNF가 내 대답을 편집했습니다. 도움이 되었기 때문에 기쁩니다! –

#map_canvas에 텍스트가 있고지도로 초기화되지 않은 경우에도 동일한 CSS가 사용 된 이유에 대해 설명 할 수 있습니까? – JNF

Google지도가 트위터 부트 스트랩과 간섭하는 경우

답변

관련 문제