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.