Gmaps4Rails自定義InfoWindow

我正在使用gmaps4rails處理我的項目，但我正在努力自定義信息窗口的方面。我遵循維基中找到的教程，除了InfoBox的回調部分外，我對其中的大部分內容都瞭解，對於我來說這是一個沒有經驗的JS程序員。當我點擊標記時，我只能得到'x'（關閉）按鈕，但沒有文字顯示或顏色按預期。這裏是我的代碼：Gmaps4Rails自定義InfoWindow

在post.rb：

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

在posts.js.coffee：

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

在gmaps4rails.css

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

筆者認爲：

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

我真的很感激，如果有人能指出我在正確的方向，因爲這是我第一次使用地圖。先謝謝你！

編輯：

我的結果：

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

編輯2：

我不想虐待你，但一旦我明白是怎麼回事，我會好由我自己的，現在它是最糟糕的。現在它甚至沒有渲染，我收到了一堆錯誤。這是我的代碼：

= 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 
    }};

錯誤：

「意外keyword_ensure，期待$結束」在返回語句的行。

來源

2012-05-29 Daniel Garzon

似乎罰款。上次我看到這種問題，是由於CSS。 – apneadiving

謝謝你的回答。不幸的是我找不到問題。我的文件如上所示，它不起作用。你有一個可以分享的實例嗎？再一次感謝你。編輯：我檢查了CSS，它適用於其他箱子時工作正常，所以我不認爲這是一個CSS問題。 –

你有沒有可視網站這個網頁？ – apneadiving

一些意見之後，我終於明白了（即使它是畢竟明顯的...）：

Gmaps.map被加載頁面時動態創建。因此，無論何時您想向此對象添加屬性，您必須在gmaps之後和之後加上,content_for :scripts。

在你的代碼：

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

來源

2012-05-29 19:40:18 apneadiving

我很抱歉我的無能，但我沒那麼有經驗，所以我真的不明白你的意思。你能否詳細說明一下？謝謝！ –

謝謝你指導我，但是請你最後一次查看我原來的帖子？再次感謝！ –

剛剛編輯了我的答案，忘了'do' – apneadiving

Gmaps4Rails自定義InfoWindow

回答

相關問題