Gmaps4Rails Custom InfoWindow

Question

I am getting gmaps4rails working on my project, but I'm struggling to customize the aspect of the info window. I followed the tutorial found in the wiki and I understand most of it except the callback part for the InfoBox that is a bit confusing for me, an inexperienced JS programmer. When I click on the marker I only get the 'x' (close) button but no text is displayed or color as expected. Here is my code:

In 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

In 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

In gmaps4rails.css

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

In my view:

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

I would really appreciate if someone can point me in the right direction as this is my first time working with maps. Thank you in advance!

EDIT:

My Results:

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

EDIT 2:

I dont want to abuse of you but once I understand what is going on I will be good by my own, for now it is just worst. Now it doesn't even render and I am getting a bunch of errors. This is my code:

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

Error:

"unexpected keyword_ensure, expecting $end" in the line of the return statement.

Answer 1

After few comments, I finally understand (even it was obvious after all...):

Gmaps.map is created on the fly when the page is loaded. So whenever you want to add properties to this object, you must add it after the gmaps call and in a content_for :scripts.

in your code:

= gmaps()

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