Gmaps4Rails自定义InfoWindow

时间:2012-05-29 16:35:32

标签: ruby-on-rails ruby-on-rails-3 gmaps4rails

我正在使用gmaps4rails处理我的项目,但我很难自定义信息窗口的方面。我按照wiki中的教程进行了操作,除了InfoBox的回调部分之外我对其中的大部分内容都有所了解,这对我来说有点让人困惑,一个没有经验的JS程序员。当我点击标记时,我只得到'x'(关闭)按钮,但没有显示文本或颜色符合预期。这是我的代码:

在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,期待$ end”在return语句的行中。

1 个答案:

答案 0 :(得分:4)

经过几次评论后,我终于明白了(毕竟,这毕竟很明显......):

加载页面时,即时创建

Gmaps.map。因此,每当您想要向此对象添加属性时,您必须在gmaps中> content_for :scripts调用之后添加

你的代码中的

= gmaps()

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