Syling window in Google Maps 4 rails

Question

I am trying to get rid of a scrolling bar that appears in the infowindows in my map, but I fail to see which element I should I apply the styling.

Which element should I apply the styles when rendering maps with Google Maps 4 rails? I know they are divs, but there is no specific class or selector, and therefore I can't select the windows.

I render my window from a partial like this:

marker.infowindow render_to_string(:partial => 'window_info', :locals => {:place => place})

gmaps4rails doesn't add any extra div to the html you put inside your infowindow. So there is nothign specific to the gem here — apneadiving, Apr 30 '12 at 13:38
in the partial window_info I have a
and I can see that when I inspect the element. However, that div is inside two other divs which I don't know where they come from, and those are the ones that I believe I need to style in order to get rid of the scroll bar. — Hommer Smith, Apr 30 '12 at 16:29

score 0 · Answer 1 · answered Apr 29 '12 at 23:25

0

You need to tell it to use a specific class, here is how I do it in my app:

<%= gmaps({"markers" => 
            {"data" => @json , 
             "options" => {"custom_infowindow_class" => "infobox", 
             "auto_adjust"=>false, "do_clustering"=>true}}} ) %>

I think you just need how to figure out how to pass

"options" => {"custom_infowindow_class" => "whatever" }

Into your map initialization

Then you can create the css class and apply your own styling

.whatever { 
  #whatever
}

answered Apr 29 '12 at 23:25

RadBrad

7,234
2
24
17

I am using gmaps4rails to generate the map, and what you suggested is not working... – Hommer Smith Apr 30 '12 at 01:24
Can you figure out how to pass the "options" => {"custom_infowindow_class" => "whatever"} into your gmaps initialization ? – RadBrad Apr 30 '12 at 05:17
I have tried looking at https://github.com/apneadiving/Google-Maps-for-Rails, but I can't find it. I did that even before asking this question... That's basically why I asked :( – Hommer Smith Apr 30 '12 at 05:30

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

As per Styling Google Maps InfoWindow , I guess you cannot really style the infowindow the way you want. You'll have to use InfoBox I've builtin the gem.

See doc here, section Custom infowindows.

edited May 23 '17 at 12:29

Community

1
1

answered Apr 30 '12 at 19:28

apneadiving

114,565
26
219
213

thanks for the answer. When I try to render the maps with gmaps instead of gmaps4rails, the markers don't appear there. Which makes impossible test if the styling is working. Is there any difference on declaring gmaps or gmaps4rails? – Hommer Smith Apr 30 '12 at 20:07
See doc, everything is explained there – apneadiving Apr 30 '12 at 21:04

score 0 · Answer 3 · answered Apr 11 '14 at 03:29

When inspecting js console in chrome there was an error: Object # < Marker > has no method 'infobox'. It´s a clue.

Acording to docs in the Custom infowindows section, step 2 we have to initialize a js code but that didnt work for me.

Then looking inside the gem in main.coffee

    infobox:            -> false   #to let user use custom infoboxes

Setting to true didnt work

The trick for me was to change this line

@infowindow = new InfoBox(@infobox(boxText))

in app/assets/javascripts/gmaps4rails/google/objects/marker.coffee

To the code mentioned in docs.

    @infowindow = new InfoBox(
      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        

    )

Syling window in Google Maps 4 rails

3 Answers3