자바 스크립트로 Google Maps InfoWindow의 크기를 조절하는 방법 (v3 API)

예. 이것은 Google Maps API v3: InfoWindow not sizing correctly의 복제본입니다.
그러나, 그 질문에 제공되는 솔루션 중 누구도 나를 :(위해 일하지 코드

: 이것은 HTML Google지도는자바 스크립트로 Google Maps InfoWindow의 크기를 조절하는 방법 (v3 API)

이

//after getting a 'position' object: 
var mapPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
var mapOptions = { zoom:16, center:mapPos,mapTypeId:google.maps.MapTypeId.ROADMAP }; 
var yourLocationMap = new google.maps.Map(document.getElementById('locationMap'), mapOptions); 

var infoContent = '<div style="width:40px;height:20px;">some information content...</div>'; 
var infoBaloon = new google.maps.InfoWindow({position:mapPos, content:infoContent, maxWidth:40}); 
infoBaloon.open(yourLocationMap);

지도의 상단에있는 정보 - 윈도우 생성 :

<div style="width: 247px; height: 88px;"> //<-This is actually the size of the info 
window. I have no idea on what basis it decides on these dimensions. 

    //next is the div for the 'X'(close) button: 
    <div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; left: 12px; top: 12px; z-index: 10000; cursor: pointer;"> 
     <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"> 
    </div> 

    // I don't know where this div is coming from... :\ 
    <div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"> 
     <div style="overflow: auto;"> 

      **// and then, finally, the div I put in the Content of the InfoWindow: 
      <div style="width:40px;height:20px;">Some content information...</div>** 
     </div> 
    </div> 
</div>

음은

도움

참고 : #locationMap div에는 크기에 대한 스타일이 있습니다 (코드 예제에는 포함되지 않음). 지도의 표현에는 아무런 문제가 없습니다. InfoWindow의 표현은 그 내용을 무엇으로할지에 관계없이 항상 247px로 보이는 것입니다 ...

출처

2012-02-04 Yuval A.

정보창의 최소 너비가 247px 일 수 있습니까? 내가 찾은 유일한 종류의 "증거"는이 기사에 있습니다. http://www.svennerberg.com/2009/02/working-with-info-windows-in-google-maps/ –

위의 질문 솔루션은 Google지도 v2에서만 사용하기 때문에 작동하지 않습니다. jQuery를 사용하여 HTML을 해킹하여 infowindow 크기를 동적으로 업데이트했습니다.하지만 코드 수정과 같은 것 같습니다. 그래서 더 나은 것은 이것에 집중하지 말고 가능한 경우 기능 (표현)을 변경하는 것입니다. – Jaykishan

도움이 될지 확실하지 않지만 실제로 구글 맵에서 infoWindow의 높이를 제어하는 2 가지가 있습니다.

정보창 및 정보창의 내용에 적용되는 CSS의 내용 (대부분의 사람들이 잘 알고 있습니다)
(대부분의 혼동 될 수 있습니다 무엇을) 자체 캔버스 구글 맵의 높이! !! !!

나는 250px의 높이로 설정된 캔버스를 가지고 있었고 infoWindow에 배치 할 내용의 스타일에 관계없이 88px의 고정 된 높이와 스크롤 막대가 나타났습니다. 캔버스를 조금 더 크게 만들면 (300px) infoWindow의 최대 높이도 변경됩니다.

infoWindow의 크기를 조정할 때 다른 모든 작업을 수행한다고 생각되면 마지막 수단은 캔버스를 조금 크게 만드는 것입니다.

행운을 빈다.

출처

2012-06-09 16:27:08 Adam

자바 스크립트로 Google Maps InfoWindow의 크기를 조절하는 방법 (v3 API)

답변

관련 문제