0

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})
2
  • gmaps4rails doesn't add any extra div to the html you put inside your infowindow. So there is nothign specific to the gem here Apr 30, 2012 at 13:38
  • in the partial window_info I have a <div class = 'map_window'> 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. Apr 30, 2012 at 16:29

3 Answers 3

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.

2
  • 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? Apr 30, 2012 at 20:07
  • See doc, everything is explained there Apr 30, 2012 at 21:04
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
}
3
  • I am using gmaps4rails to generate the map, and what you suggested is not working... Apr 30, 2012 at 1:24
  • Can you figure out how to pass the "options" => {"custom_infowindow_class" => "whatever"} into your gmaps initialization ?
    – RadBrad
    Apr 30, 2012 at 5:17
  • I have tried looking at 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 :( Apr 30, 2012 at 5:30
0

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        

    )

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.