Gmaps4Rails 사용자 정의 InfoWindow

Question

gmaps4rails가 내 프로젝트에서 작동하고 있지만 Info Window의 모습을 사용자 정의하는 데 어려움을 겪고 있습니다. 위키에있는 튜토리얼을 따라 갔고, InfoBox를위한 콜백 부분을 제외하고는 대부분 익숙하지 않은 JS 프로그래머가 혼란 스럽다. 마커를 클릭하면 'x'(닫기) 버튼 만 표시되지만 예상대로 텍스트가 표시되거나 색상이 표시되지 않습니다. post.rb에서

: posts.js.coffee에서

def gmaps4rails_infowindow 
    # add here whatever html content you desire, it will be displayed when users clicks on the marker 
    "<h4>#{self.title}</h4>" 
end 

:

Gmaps.map.infobox = (boxText) -> 
    content: boxText 
    disableAutoPan: false 
    maxWidth: 0 
    pixelOffset: new google.maps.Size(-140, 0) 
    zIndex: null 
    boxStyle: 
    background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat" 
    opacity: 0.75 
    width: "280px" 

    closeBoxMargin: "10px 2px 2px 2px" 
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
    infoBoxClearance: new google.maps.Size(1, 1) 
    isHidden: false 
    pane: "floatPane" 
    enableEventPropagation: false 

내보기에서

.yellow { border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px; } 

gmaps4rails.css에서 여기 내 코드입니다 :

= gmaps("markers" => {"data" => @json, "options" => {"custom_infowindow_class" => "yellow" } }) 

지도를 처음으로 사용하기 때문에 누군가가 올바른 방향으로 나를 안내 할 수 있다면 정말 고맙겠습니다. 미리 감사드립니다.

편집 :

내 결과 :

http://postimage.org/image/45feoz3kl/

편집 2 : 나는 내가가 좋은 것에 무슨 일이 일어나고 있는지 이해하면 당신의 남용하지만 싶지 않다

내 이제는 최악입니다. 이제는 렌더링되지 않으며 많은 오류가 발생합니다. return 문의 라인에 "끝 $ 기대, 예상하지 못한 keyword_ensure"

:

= gmaps("markers" => {"data" => @json, "options" => {"custom_infowindow_class" => "yellow" } }) 
- content_for :scripts 
    :javascript 
    Gmaps.map.infobox = function(boxText) { 
     return { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-140, 0) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat" 
      ,opacity: 0.75 
      ,width: "280px" 
      } 
     ,closeBoxMargin: "10px 2px 2px 2px" 
     ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
     ,infoBoxClearance: new google.maps.Size(1, 1) 
     ,isHidden: false 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
    }}; 

오류 :이 내 코드입니다.

Answer 1

몇 가지 코멘트를 후, 나는 마침내 (심지어는 결국 분명했다 ...) 이해 : 페이지가로드 될 때

Gmaps.map는 즉석에서 생성됩니다. 따라서이 객체에 속성을 추가 할 때마다gmaps 다음에 을 추가하고 및을 content_for :scripts에 추가해야합니다. 코드에서

:

= gmaps() 

- content_for :scripts do 
    :javascript 
    Gmaps.map.infobox = function(....