Google지도가 FancyBox에서 올바르게 렌더링되지 않습니다. 어떻게 수정합니까?

FancyBox 내에 Google지도를 표시해야합니다. 이 튜토리얼에서는 "fancybox.iframe"CSS 클래스를 사용하여 직선적 인 방식으로이를 수행하는 방법을 보여줍니다. 그러나 맵 이외의 다른 것을 표시하려면 FancyBox가 필요합니다. 아래 양식.Google지도가 FancyBox에서 올바르게 렌더링되지 않습니다. 어떻게 수정합니까?

<div id="fancybox-container"></div>

CSS

#fancybox-container { 
    display: none; 
    width: 450px; 
    height: 500px; 
    border: 1px solid red; 
    padding: 3px; 
    overflow: hidden; 
}

마지막으로 일부 커피 스크립트

HTML :

$ -> 
    new FancyMap() 

class FancyMap 
    constructor: -> 
    @openMap() #once fancybox is open proceed to render the map inside of it 
    options = 
     center: new google.maps.LatLng(6.191556, -75.579716) 
     zoom: 14 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    @map = new google.maps.Map $('#fancybox-container')[0], options 

    openMap: -> 
    $('a[href=#fancybox-container]').fancybox 
     maxWidth: 500 
     maxHeight: 550 
     fitToView: false 
     autoSize: true 
     closeClick: false 
     openEffect: 'none' 
     closeEffect: 'none' 

window.FancyMap = FancyMap

의 결과

지금까지 여기 (매우 간단) 내 코드입니다 그게 거의 내가 아는 것입니다. 렌더링이 엉망이되는 것을 제외 개미,이 같은

fancybox+googlemaps

내가 내지도를 드래그하면 결과가 .. 뭔가 :

fancyboxdragged

그래서, 결론, 내가 ' 확실하게 중요한 자산이나 구성이 누락되었습니다. 맞습니까? 이 문제를 해결하도록 도와 줄 수 있습니까?

미리 감사드립니다.

참고. 나는 여기서 비슷한 질문을 읽고 시도했지만, 나는 아직도 실패했다. 그래서 가장 간단한 버전으로이 문제를 해결했습니다.

출처

2012-02-10 jlstr

구글 맵스는 얼마나 큰지도 모를 때 이것을합니다. 예를 들어지도를 열기 전에 라이트 박스에 지정하면 어떤 크기가되어야할지 모릅니다.

생성자에서지도를 추가하는 대신 콜백에 추가하여 상자를 열 때 실행됩니다. 에서 제공

코드 예제 당신은 또한 Map에 triggerresize 이벤트가지도 컨테이너의 크기를 조정하기 위해지도 API를 얻을 수 http://goo.gl/t7SOm

출처

2012-02-10 19:50:49 ArthurGuy

이것은 매우 n00b 문제 일지 모르지만 .. 어떤 콜백으로 각하에 대해 이야기하고 있습니까? :) – jlstr

저는 CoffeeScript에 익숙하지 않아서 특별히 언급 할 수는 없지만 대부분의 라이트 박스 라이브러리는 오프닝을 마치면 알림을 받거나 뭔가를 할 수있는 기능을 제공하지 않습니다. 멋진 상자에는 상자가 열렸을 때 해고 될 기능을 지정할 수있는 구성 옵션 onComplete가 있습니다. – ArthurGuy

@ user766388 : 다음과 같은 내용이 작동해야합니다. http://goo.gl/t7SOm (jsfiddle.net이 현재 사용 중이거나 사용하지 않고있는 댓글 상자에 맞지 않는 긴 coffeescript.org URL입니다. 그). ArthurGuy : 원하는 경우 답변에 붙여 넣을 수 있습니다. 내 대답을 추가하여 천둥을 훔치고 싶지는 않습니다. –

"MU가 너무 짧습니다".

출처

2012-02-11 00:46:40

Google지도가 FancyBox에서 올바르게 렌더링되지 않습니다. 어떻게 수정합니까?

답변

관련 문제