Google지도의 마커의 정보창 최대 높이를 설정하는 방법은 무엇입니까?

Question

마커의 정보창의 내용이 너무 길면 창에 맞지 ​​않습니다. 마커 정보창의 내용이 하단에서 오버플로됩니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

이 문제는 또한 정보 창의 내용에 적용되는 상속 된 스타일의 결과가 될 수 있습니다

그렇지 않으면, 단순히 스크롤로 사업부에 내용을 배치 할 것 지도.

예 : 글꼴 크기는 기본 글꼴을 기반으로 계산됩니다. 정보창이 연결되면 글꼴은 상속 된 CSS에 따라 변경되며 글꼴 크기가 클 경우 정보창 하단이 오버플로됩니다.

상속 된 스타일을 제거하지 않으려면 (대부분 사용자가하지 않는 경우) 정보창 콘텐츠에서 상속 된 스타일을 명시 적으로 반박해야합니다.

이 문제의 훌륭한 설명을 찾을 수 있으며에서 해결책 : 코드 위

Fixing the 'inherited CSS' problem

Answer 2

InfoWindow에 그림이 포함되어있는 경우 그림 다운로드 전에 InfoWindow 크기가 설정되어 있기 때문에 그림이 넘칠 수 있습니다. 이 경우 이미지 크기를 지정하거나 이미지를 미리로드해야합니다. 그것이 부착 한 후

가

div.infowindow { 
    max-height:250px; 
    overflow-y:auto; 
} 

Answer 3

.gm-style-iw{ 
    max-height: 10px; 
} 

이 작업을 수행합니다!

Answer 4

허용 된 대답은 그래서 여기 ...

조금 모호하다 정보창의 높이, 또는 다른 스타일 속성을 변경하고자하는 사람을위한 직접 솔루션의 몇입니다.

방법 1 : CSS

때문에 같은 CSS 규칙을 적용합니다. 사용자 정의 IW 템플릿이있는 경우,이 너무 작업 할 수

.gm-style-iw { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

을 또는 :!

#myInfoWindow-content { 
    max-height: 200px !important; 
    overflow: auto !important; 
} 

오버 플로우가 중요 있어야합니다, 그렇지 않으면 GM의 자신의 규칙과 긴으로 대체됩니다 그것은 모든 정보창의 변경 콘텐츠가 차단 될 수 있습니다. Max-height는 중요하지 않고 작동하지만 어쨌든 유지하는 것이 좋습니다.

방법 2 : 인라인 CSS

당신이 IW 내용에 대한 템플릿을 사용하는 경우, 다음 옵션은 인라인 정보창에 따라 스타일을 하드 코어하는 것입니다. 이 경우 GM이 전체 규칙을 따르기 때문에! important를 사용할 필요가 없습니다.

<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;"> 
    content 
</div> 

방법 3 : 자바 스크립트

당신은 항상 동적으로 물건을 수정하는 JS를 사용할 수 있습니다. 이 방법을 사용하면 IW 화살표를 숨기는 등의 다른 IW 요소를 대상으로 수정할 수 있습니다.

document.getElementById('myInfoWindow-content').style.maxHeight = '20px'; 
document.getElementById('myInfoWindow-content').style.overflow = 'auto';