Gmaps4rails : Setting map width and height

Question

Reading the gmaps4rails gem documentation, I didn't find any way to set the map width and height. Is there any way to do this ?

score 11 · Accepted Answer · answered Mar 14 '11 at 11:41

11

I should have given further details about this.

I'll make an installation rake task to copy css and javascript in the Rails app.

Well, for now, simply override this in your css (I assume you didn't change the map id).

#gmaps4rails_map {
  width: 800px;
  height: 400px;
}

If you want it to work, beware to include your css after the yield(:head)

<%= yield :head %>
<%= stylesheet_link_tag "your css" %>

answered Mar 14 '11 at 11:41

apneadiving

114,565
26
219
213

Thanks for your wonderful gem. Just a quick clarification. In your answer you have gmaps4rails_map listed as an id, is it not a class? – Seanland Nov 18 '11 at 19:36
@Seanland: If I recall well, I changed this when I introduced multi maps :) – apneadiving Nov 18 '11 at 19:54
1

What is the best practice when I need to display different size maps? I.e., not multi maps, but different pages whose designs require different sizing of the maps. – Anthony Liekens Nov 23 '11 at 23:30
@alieken: you can change the class of the maps, so do this way it's by far the cleanest – apneadiving Nov 23 '11 at 23:47
OK, thank you, that sounds indeed very reasonable. I'm just going to add that both the `:container_class` and `:class` in `:map_options` should be set since both CSS classes need their widths updated. – Anthony Liekens Nov 24 '11 at 00:28
@apneadiving Could you please update your gem to allow easy setting of map size like <%= gmaps("markers" => {"data" => json, "options" => {"auto_zoom" => false, "width" => 100} }) %> – Abram Oct 06 '12 at 04:31
@apneadiving, the reason I want to put it in the view is so that I can set width using a local variable... sometimes I need the map to generate different width based on other content on the page. Just check out the methodology used in https://github.com/joshuamiller/cartographer Thanks – Abram Oct 06 '12 at 06:03
You can change both classes, see this example in doc: <%= gmaps( :map_options => { :container_class => "foo", :class => "baz" } ) %> – apneadiving Oct 06 '12 at 07:22
gmaps4rails_map doesn't seem to be the css id, but the css class now. And the container's size attributes should be changed as well. See Intentss answer below. I'm guessing this answer was right at point, but things have changed. – mmrobins Jan 27 '13 at 06:52
@mmrobins yes things changed when I implemented the multimaps feature – apneadiving Jan 27 '13 at 08:53

score 2 · Answer 2 · answered Apr 27 '12 at 02:16

The answer by @apenadving didn't work for me, assuming that the map div classes and id's didn't change, I needed to do the following (in scss) in order to get things working correctly, maybe I'm missing something...

.map_container{
   $width:675px;
   width:$width;
   .gmaps4rails_map{
     width: $width;
     height: 400px;
   }
}

Also with rails 3.1 and above you can simply do the following in your application.css.scss file

@import "gmaps4rails";
@import "myCoolStyle";

score 0 · Answer 3 · answered Oct 06 '12 at 05:18

if you want to do this easily I would recommend you follow this set of steps:

Add a custom container class using:

<%= gmaps( :map_options => { :container_class => "map_container_renamed" }, "markers" => {"data" => @json, "options" => {"auto_zoom" => false} }) %>

Then add in your css:

div.map_container_renamed #map {
  width: 420px;
  height: 260px;
}

div.map_container_renamed {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
  width: 420px;
}

Gmaps4rails : Setting map width and height

3 Answers3

Linked