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

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

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></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 %>
  </head>

...

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.

Hi,

I’ve had a similar issue using bootstrap and Google Maps and getting the map into a <div class="google-maps”></div> fixed the problem for me.

<div class="google-maps">
<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>
</div>

I just tried this, again no luck :frowning:

Hi

Use this gem

https://github.com/apneadiving/Google-Maps-for-Rails

Thanks & Regards,
kanna.