How do i use different CSS options for different pages using gmaps4rails?

Question

I want to have different size maps on differernt pages...but i can't see to figure it out. When I disable css, the whole map disappears.

<%= gmaps({ map_options: {
                                zoom: 8,
                                auto_zoom: false },
                            markers: { data: @json } },
                            enable_css: false) %>

and then i put CSS around it:

<div id="sidebar">
            <div id="map_canvas" style="width: 294px; height: 370px; position: relative">
                <%= gmaps({ map_options: {
                                zoom: 8,
                                auto_zoom: false },
                            markers: { data: @json } },
                            enable_css: false) %>
            </div>
        </div>

but that makes the map disappear. what am i doing wrong?

Answer 1

Just have a look at the wiki (or at the html page). The html generated is by default:

<div class="map_container"> 
  <div id="map" class="gmaps4rails_map"></div> 
</div>

So if you want to style, simply:

• edit or disable gmaps4rails css

• style the classes/id presented above, no need to add extra markup