Ruby on rails Gmaps4Rails自定义信息窗口

我让gmaps4rails在我的项目中工作，但我正在努力定制信息窗口的外观。我遵循wiki中的教程，除了InfoBox的回调部分，我了解其中的大部分内容，这对我这个没有经验的JS程序员来说有点困惑。当我点击标记时，我只得到“x”（关闭）按钮，但没有显示预期的文本或颜色。这是我的密码：

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

在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

在gmaps4rails.css中

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

我认为：

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

如果有人能为我指出正确的方向，我将不胜感激，因为这是我第一次使用地图。提前谢谢你

编辑：

我的结果：

编辑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
    }};

错误：

---

返回语句行中的“意外关键字\u sure，期望$end”。

经过几句评论后，我终于明白了（尽管这很明显……）：

Gmaps.map

是在加载页面时动态创建的。因此，每当您想向该对象添加属性时，必须将其添加到

gmap

调用之后，并在

content\u中为脚本添加

在代码中：

= gmaps()

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

在几句评论之后，我终于明白了（尽管这毕竟是显而易见的…）：

Gmaps.map
是在加载页面时动态创建的。因此，每当您想向该对象添加属性时，必须将其添加到
gmap
调用之后，并在
content\u中为脚本添加

在代码中：

= gmaps()

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

看起来不错。上次我看到这种问题，是因为css。谢谢你的回答。不幸的是，我找不到问题。我的文件如上所示，它不工作。您是否有一个可以分享的工作示例？再次感谢你。编辑：我检查了css，它在应用到其他框时工作正常，所以我认为这不是css问题。你有这个页面的可见url吗？你在控制台中有任何js错误吗？我只在本地运行我的网站，但我发布了我在原始帖子中在控制台中发现的警告。我还发现HTML中生成的JS很好，如第三次编辑中所示！看起来不错。上次我看到这种问题，是因为css。谢谢你的回答。不幸的是，我找不到问题。我的文件如上所示，它不工作。您是否有一个可以分享的工作示例？再次感谢你。编辑：我检查了css，它在应用到其他框时工作正常，所以我认为这不是css问题。你有这个页面的可见url吗？你在控制台中有任何js错误吗？我只在本地运行我的网站，但我发布了我在原始帖子中在控制台中发现的警告。我还发现HTML中生成的JS很好，如第三次编辑中所示！我为我的无能感到抱歉，但我没有那么丰富的经验，所以我真的不明白你的意思。你能再详细一点吗？非常感谢。谢谢你指导我，但你能最后一次查看我原来的帖子吗？再次感谢！非常感谢你！让它工作起来。希望我能在更有经验的时候把它还给你。我感谢你所做的一切。祝您今天过得愉快！我为我的无能感到抱歉，但我没有那么丰富的经验，所以我真的不明白你的意思。你能再详细一点吗？非常感谢。谢谢你指导我，但你能最后一次查看我原来的帖子吗？再次感谢！非常感谢你！让它工作起来。希望我能在更有经验的时候把它还给你。我感谢你所做的一切。祝您今天过得愉快！