Google-Maps-for-Rails - How do I set the size of a map image using gmap4rails?

Greetings.

I've had trouble with the Cartographer plugin when deploying to Heroku. I tried Google-Maps-for-Rails (gmaps4rails gem) and it looks very promising. But I've not been able to figure out how to set the map image size.

With Cartographer, I can set the map image size using markup like the following.

<div id="map-right">
  <%= raw Cartographer::Header.new.to_s %>
  <%= raw @map.to_html %>
  <div id="map" style="width:658px;height:348px;">[Map]</div>
</div>

How do I get similar behavior using gmaps4rails? I'm trying this.

<div id="map-right">
  <div id="map" style="width:658px;height:348px;"><%= gmaps4rails(@events_map) %></div>
</div>

That draws the map but does not set image size. What's a sensible appr开发者_StackOverflowoach?

Thanks.

---

Let's be even more precise.

In gmaps4rails, a css file is loaded containing the properties of the map container and the map itself. The default are visible here:

https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/public/stylesheets/gmaps4rails.css

So you have two choices:

1. basic: override this css (which works fine)

2. A better alternative is to redefine the css the way you want + cancel the loading of the default css file. You could achieve that by passing falseas second argument of the gmaps or gmaps4rails view helper. See here : https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Miscellaneous

---

You can set it via css:

#gmaps4rails_map {
  width: 658px;
  height: 348px;
}

See the gem author's answer here: Gmaps4rails : Setting map width and height

---

I'm following apneadiving's approach, though my implementation may be a bit awkward, i.e., naive.

In my view I have the following markup.

<div id="map" style="width:658px;height:347px">
   <%= stylesheet_link_tag 'gmaps4rails_welcome' %>
   <%= gmaps4rails(@models_map, false, true) %>
</div>

I load my own gmaps4rails_welcome.css and avoid loading the default gmas4rails css by passing 'false' as the second argument.

My gmaps4rails_welcome.css file contains the following code.

#map-container {
  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: 800px;
}

#gmaps4rails_map {
  width: 658px;
  height: 347px;

}

For each map rendering I have a specific stylesheet. This works.

Thanks!

---

I had the same issue and solved it differently. I commented out the width from gmaps4rails.css and wrapped the Google map in a div which has the width-setting. Through this, the map is resizeable, e.g. when using a responsive approach, grid system, etc. I use this with Twitter Bootstrap and it works fine. Note that I fix the height so far. Hope that helps.

#map-container {
  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: 800px;
}

#gmaps4rails_map {
//  width: 658px;
    height: 347px;
}