Google Maps v3에서 홈 아이콘을 클릭하면 내 InfoWindow가 InfoWindow의 콘텐츠에 맞게 자동으로 크기가 조정되지 않는 것 같습니다.
안될 때 스크롤바를 제공합니다. InfoWindow는 적절하게 자동 크기 조정되어야합니다.
이유에 대한 아이디어가 있습니까?
요청에 따라 InfoWindow에 HTML을 삽입하는 관련 JavaScript :
listing = '<div>Content goes here</div>';
최신 정보
이 버그는 Google에서 처리 한 문제입니다.
https://issuetracker.google.com/issues/35823659
이 수정 사항은 2015 년 2 월 Maps JavaScript API 버전 3.19에서 구현되었습니다.
답변
정보창에 div 추가
<div id=\"mydiv\">YourContent</div>
그런 다음 css를 사용하여 크기를 설정하십시오. 나를 위해 작동합니다. 이것은 모든 정보창의 크기가 같다고 가정합니다!
#mydiv{
width:500px;
height:100px;
}
답변
간단한 대답 : 생성자에서 maxWidth 옵션 속성을 설정합니다 . 예, 최대 너비 설정이 원하는 것이 아니더라도 가능합니다.
더 긴 이야기 : v2 맵을 v3로 마이그레이션하면서 설명 된 문제를 정확히 확인했습니다. Windows는 너비와 높이가 다양했으며 일부는 세로 스크롤바가 있고 일부는 그렇지 않았습니다. 일부는 <br /> 데이터에 삽입되었지만 적어도 하나는 그 크기가 괜찮습니다.
너비 를 제한 하지 않았기 때문에 InfoWindowsOptions.maxWidth 속성이 관련성이 있다고 생각하지 않았지만 InfoWindow 생성자로 설정하여 원하는 것을 얻었고 이제 창 크기가 (수직으로) 자동 조정되고 세로 스크롤바없이 전체 콘텐츠를 표시합니다. 나에게 많은 의미가 없지만 작동합니다!
답변
jQuery 객체에서 InfoWindow로 콘텐츠를 제공해야합니다.
var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);
답변
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
}
그것은 나를 위해 작동합니다
답변
편집 됨 (눈에 띄게) :이 질문에 대한 수백 개의 다른 답변 중 이것이 왜 발생하는지 설명하는 유일한 올바른 답변입니다.
좋아, 그래서 나는이 스레드가 오래되었고 수천 개의 답변이 있다는 것을 알고 있지만 그중 어느 것도 정답 이 없으며 정답을 게시해야 할 필요성을 느낍니다.
첫째, 스크롤바없이 infoWindow를 표시하기 위해 또는 아무것도 지정 하지 않아도됩니다. 가끔 이렇게하면 실수로 작동하게 될 수도 있지만 결국 실패하게됩니다.width'sheight's
둘째, Google Maps API 에는 스크롤 버그 infoWindow's 가 없으며 작동 방식에 대한 올바른 정보를 찾기가 매우 어렵습니다. 음, 여기 있습니다 :
다음과 같이 infoWindow에서 열도록 Google Maps API에 지시 할 때 :
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
모든 의도와 목적을 위해 Google지도 div는 페이지 끝에 a 를 임시로 배치합니다 ( 실제로는 생성 detached DOM tree하지만 div페이지 끝에 존재 한다고 상상하면 개념적으로 이해하기 더 쉽습니다 ). 지정. 그런 다음 div (이 예에서는 내 문서의 CSS 규칙이 적용 h1되고 p태그가 적용됨을 의미 함)를 측정하여 width및 height. 그런 다음 Google은이를 가져 와서 div페이지에 추가되었을 때 얻은 측정 값을 할당하고 지정한 위치의지도에 배치합니다.
많은 사람들에게 문제가 발생하는 곳은 다음과 같습니다. 다음과 같은 HTML이있을 수 있습니다.
<body>
<div id="map-canvas"><!-- google map goes here --></div>
</body>
그리고 어떤 이유로 든 다음과 같은 CSS :
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
문제가 보이십니까? 이 API의 시도가에 대한 측정을 수행 할 때 infoWindow(즉시 표시하기 전에)의 h1내용의 일부의 크기를해야합니다 18px(임시 “측정 사업부는”몸에 추가되기 때문에)하지만, API는 실제로 배치하는 경우 infoWindow에 지도에서 #map-canvas h1선택기가 우선적으로 적용되어 글꼴 크기가 API가의 크기를 측정했을 때 infoWindow와 크게 다르며이 상황에서는 항상 스크롤바가 표시됩니다.
에 스크롤바가있는 특정 이유에 대해 약간 다른 뉘앙스가있을 수 infoWindow있지만 그 이유는 다음과 같습니다.
infoWindow
실제 HTML 요소가 마크 업에 나타나는 위치에 관계없이 동일한 CSS 규칙이 내부 콘텐츠에 적용되어야합니다 . 그렇지 않은 경우, 당신은 될 것이다 보장 하여 정보창에 스크롤바를 얻을 수
그래서 제가 항상하는 일은 다음과 같습니다.
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
내 CSS에서 :
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
따라서 API가 측정을 추가하는 위치에 관계없이 div닫히기 전 body이나 내부에 #map-canvas적용된 CSS 규칙은 항상 동일합니다.
RE 편집 : 글꼴 패밀리
Google은 글꼴로드 문제 (아래 설명)에 대해 적극적으로 작업하고있는 것으로 보이며 최근에 기능이 변경되었으므로 Roboto 글꼴로드가 표시되거나 표시되지 않을 수 있습니다. infoWindow 사용중인 API 버전에 따라 처음 열 . Google이 여전히이 문제에 어려움을 겪고 있음을 보여주는 공개 버그 보고서 ( 변경 로그 에이 버그 보고서가 이미 수정 된 것으로 표시 되었음에도 불구하고 )가 있습니다.
한 가지 더 : 글꼴 가족보기 !!!
API의 최신 화신에서 Google은 영리하고 CSS 선택기로 타겟팅 할 수있는 것으로 infoWindow 콘텐츠를 래핑하려고했습니다 .gm-style-iw. 위에서 설명한 규칙을 이해하지 못한 사람들에게는 이것이 실제로 도움이되지 않았고 어떤 경우에는 더욱 악화되었습니다. 스크롤바는 거의 항상를 처음 infoWindow열었을 때 나타납니다. 하지만 infoWindow다시 열면 똑같은 내용 으로도 스크롤바가 사라집니다. 진지하게, 전에 혼동하지 않았다면 정신을 잃게 될 것입니다. 무슨 일이 일어나고 있었는지 :
API가로드 될 때 Google이 페이지에로드하는 스타일을 살펴보면 다음을 확인할 수 있습니다.
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
그래서 Google은 항상 Roboto글꼴 모음을 사용하여지도를 좀 더 일관성있게 만들고 싶었습니다 . 문제는 대부분의 사람들에게을 열기 전에 infoWindow브라우저가 아직 Roboto글꼴을 다운로드 하지 않았다는 것입니다 (페이지의 다른 어떤 것도 글꼴을 사용하지 않았기 때문에 브라우저가 다운로드 할 필요가 없다는 것을 알 수있을만큼 똑똑하기 때문입니다) 이 글꼴). 이 글꼴을 다운로드하는 것은 매우 빠르지 만 즉각적인 것은 아닙니다. 를 처음 열면 infoWindowAPI가 콘텐츠 div와 함께 infoWindow를 본문에 추가하여 측정을 수행하면 Roboto글꼴 다운로드가 시작 되지만 다운로드가 완료 infoWindow's되기 전에 측정이 수행되고 창이지도에 배치됩니다 Roboto. 그 결과는 꽤 자주infoWindow 콘텐츠가 Arial또는 sans-serif글꼴을 사용하여 렌더링 될 때 측정이 수행 되었지만에 표시되었을 때 지도 (및Roboto다운로드 완료) 콘텐츠가 다른 크기의 글꼴로 표시되고 있었으며 infoWindow. 똑같은 파일 infoWindow을 두 번째로 엽니 다. 이 시점에서 Roboto가 다운로드되고 API가 infoWindow콘텐츠를 측정 하고 스크롤바가 표시되지 않을 때 사용됩니다 .
답변
나열된 각 답변을 시도했습니다. 아무도 나를 위해 일하지 않았습니다. 이것은 마침내 영구적으로 수정되었습니다. 내가 상속 한 코드 DIV에는 모든 <h#>및 <p>항목에 래퍼가 있습니다 . 나는 단순히 원하는 최대 너비를 고려하여 동일한 DIV에서 일부 “스타일”을 강제하고 (다른 사람의 수정) 경우에 대비해 줄 높이 변경을 던졌고 white-space: nowrap, 자동 오버플로가 올바른 조정을 수행하도록했습니다. 스크롤 바, 잘림 및 문제 없음!
html = '<div class="map-overlay" style="max-width: 400px;
line-height: normal;
white-space: nowrap;
overflow: auto;
">';
답변
이것이 오래된 스레드라는 것을 알고 있지만 동일한 문제가 발생했습니다. InfoWindow에 <h2>및 <p>요소 가 있었고 둘 다 아래쪽 여백이있었습니다. 여백을 제거하고 InfoWindow의 크기가 올바르게 조정되었습니다. 다른 제안 된 수정 사항은 작동하지 않았습니다. InfoWindow 크기 계산이 여백을 고려하지 않는다고 생각합니다.
