Having trouble overriding bootsrap-sass Gem css with GMaps API accesssed through Gmaps4Rails Gem
22 views
Skip to first unread message
Jim Whittaker
Apr 26, 2014, 12:02:38 PM4/26/14
to rubyonra...@googlegroups.com
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.
*
*= require_self
*= require_tree .
*/
index.html.erb --> home page where map is displayed
<head><link rel="stylesheet" href="reports.css.scss" /></head>
<script
src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry"
type="text/javascript"></script>
<script
src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js'
type='text/javascript'></script>
<script
src='//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js'
type='text/javascript'></script>
...
<%= link_to 'New Report', new_report_path %>
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script type="text/javascript">
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 :)
--
Posted via http://www.ruby-forum.com/.
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.
*
*= require_self
*= require_tree .
*/
index.html.erb --> home page where map is displayed
<head><link rel="stylesheet" href="reports.css.scss" /></head>
<script
src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry"
type="text/javascript"></script>
<script
src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js'
type='text/javascript'></script>
<script
src='//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js'
type='text/javascript'></script>
...
<%= link_to 'New Report', new_report_path %>
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script type="text/javascript">
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 :)
--
Posted via http://www.ruby-forum.com/.
Andrei G
Apr 26, 2014, 4:51:45 PM4/26/14
to rubyonra...@googlegroups.com
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/ae1656d09e5f3a9d365532be81172170%40ruby-forum.com.
> 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 <div class="google-maps”></div> fixed the problem for me.
Jim Whittaker
Apr 26, 2014, 5:32:49 PM4/26/14
to rubyonra...@googlegroups.com
<div class="google-maps">
I just tried this, again no luck :(
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
</div>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
I just tried this, again no luck :(
Kanna Vrk
Apr 27, 2014, 3:24:43 AM4/27/14
to rubyonra...@googlegroups.com
Hi
Use this gem
https://github.com/apneadiving/Google-Maps-for-Rails
Thanks & Regards,
kanna.
Use this gem
https://github.com/apneadiving/Google-Maps-for-Rails
Thanks & Regards,
kanna.
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/db0454ebc8547fbfd169ae14d68f9fcb%40ruby-forum.com.
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages