Having trouble overriding bootsrap-sass Gem css with GMaps API accesssed through Gmaps4Rails Gem

Rails
1

I am following the Gmaps4Rails tutorial and trying to implement it in a
bootstrap framework, but am having problems. The map won’t load
correctly… See here: http://i.imgur.com/qMiczCe.png. Zooming in
function does not work.

I tried the workaround but it has only helped marginally. This appears
to be a problem with how bootstrap is set up, or perhaps my require tree
is not correct. See below for my relevant code.

views/layouts/application.html.erb

<%= full_title(yield(:title)) %> 
<%= stylesheet_link_tag "application", media: "all",
                        "data-turbolinks-track" => true %>
<%= javascript_include_tag "application",
                           "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
<% flash.each do |key, value| %>
  <%= content_tag(:div, value, class: "alert alert-#{key}") %>
<% end %>

…

custom.css.scss → this is the main stylesheet for my app, and I added
the workaround code here just to see if it would make a difference, but
it did not.

@import “bootstrap”;

/MAP/

#map img {
max-width: none;
}
#map label {
width: auto; display:inline;
}

…

application.css

…

  • You’re free to add application-wide styles to this file and they’ll
    appear at the top of the
  • compiled file, but it’s generally better to create a new file per
    style scope.

*= require_self
*= require_tree .
*/

index.html.erb → home page where map is displayed

…

<%= link_to ‘New Report’, new_report_path %>

handler = Gmaps.build('Google'); handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ markers = handler.addMarkers(<%=raw @hash.to_json %>); handler.bounds.extendWith(markers); handler.fitMapToBounds(); }); reports.css.scss --> The name of my model is Reports, as opposed to 'User' in the gmaps4rails demo // Place all the styles related to the Reports controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ #map img { max-width: none; } #map label { width: auto; display:inline; } application.js //= require jquery //= require jquery_ujs //= require bootstrap //= require turbolinks //= require underscore //= require gmaps/google //= require_tree . Any help is much appreciated :)
2

On 26 Apr 2014, at 19:02, Jim W. [email protected] wrote:

<%= render ‘layouts/shim’ %>
it did not.
}
style scope.

<script handler.bounds.extendWith(markers); application.js For more options, visit https://groups.google.com/d/optout.

Hi,

I’ve had a similar issue using bootstrap and Google Maps and getting the
map into a

fixed the problem for me.

3

I just tried this, again no luck :frowning:

4

Hi

Use this gem

Thanks & Regards,
kanna.