맞춤 Google지도 API InfoWindow가 작동하지 않습니다.

Question

InfoWindow domready 이벤트 핸들러를 사용하여 InfoWindow의 디자인을 수정하고 있습니다.

google.maps.event.addListener(popup, 'domready', function() { 

jquery를 사용하여 InfoWindow의 내부 div 중 일부 높이를 변경하고 있습니다.

높이가 변경되면 즉시 기본 크기로 다시 설정됩니다. 또한 이벤트 핸들러는 두 번 호출됩니다.

모든 div가 크기를 재설정하지는 않지만 일부만 수행합니다. 내 코드의

부 :

popup = new google.maps.InfoWindow({ 
    content:'<image id="pin_' + pin_count + '" src="question.png"/>' 
}); 

// Parent.Parent.Parent 
e = $('#pin_' + pin_count).parent().parent().parent(); 
console.log(e.height()); 
h = parseFloat(e.height()); 
e.css({ 
    'position' : 'absolute', 
    'top' : '-100px', 
    'height' : (h + 100) + 'px', 
    'border-radius' : '16px 16px 16px 16px', 
    'border' : '2px solid red', 
}); 
console.log(e.height()); 
console.log("..."); 

가 있습니까 완전히 그려 후 나 정보창을 수정할 수있는, 내가 사용할 수 있습니다 domready 이외의 다른 이벤트?

Answer 1

나는 길을 잃었습니다. InfoWindow가 Map에 추가 될 때마다 모든 타일이 다시 그려지고 InfoWindow 마커도 모두 재설정됩니다.

그래서,

google.maps.event.addListener(map, 'tilesloaded', function() { 

그것은 내 변화를 계속 시도했다, 그러나 나는 다른 문제를 건너 왔어요.

지도에서 드래그, 확대/축소 등과 같은 일이 발생할 때마다 호출됩니다. 각 마커에 플래그를 유지하고 마커가로드되는 경우에만이를 실행해야합니다.

두 이벤트가 함께 발생하기를 기다리는가요?

업데이트 : domready 이벤트를 얻을 때

내가 플래그를 설정하고있다. 다음 tilesloaded을 얻었을 때 플래그를 확인하고 InfoWindow의 크기를 조정합니다. 그것은 효과가있다. 그러나 다시 한 가지 문제.

동일한 좌표에 마커를 하나 더 추가하면 타일이 다시로드되지 않고 tilesloaded 이벤트가 생성되지 않습니다.

질문이 하나 더 있습니다.지도의 모든 이벤트를 단일 처리기로 가져올 수 있습니까?

업데이트 2

나는이 문제를 발견했다. 실제 InfoWindow 콘텐츠의 세 번째 부모 인 div가 크기가 재설정되는 유일한 요소입니다. 이 재설정 된 경우 나, tilesloaded 이벤트를 얻을 때

그래서, 나는 ... 나는 다시 높이를 설정, DIV의 높이를 확인하고

google.maps.event.addListener(map, 'tilesloaded', function() { 
    e = $('#pin_' + pin_count).parent().parent().parent(); 
    // default height is saved before the div is resized in domready event handler 
    if (e.css("height") < default_height) { 
     h = parseFloat(e.height()); 
     e.css({ 
      'height' : (h + 100) + 'px', 
     }); 
    } 
});