0

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 approach?

Thanks.

apneadiving
  • 114,565
  • 26
  • 219
  • 213
user737981
  • 1
  • 1
  • 2

4 Answers4

2

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

apneadiving
  • 114,565
  • 26
  • 219
  • 213
  • This does work but my implementation may be a bit awkward.
    <%= stylesheet_link_tag 'gmaps4rails_search' %> <%= gmaps4rails(@events_map, false, true) %>
    – user737981 May 05 '11 at 01:18
1

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

Community
  • 1
  • 1
Dylan Markow
  • 123,080
  • 26
  • 284
  • 201
  • This works. But I have three maps on three different pages. All of different sizes. Setting this CSS makes them all the same size. – user737981 May 05 '11 at 00:40
0

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;
}
Patrick Frey
  • 775
  • 1
  • 8
  • 18
0

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!

user737981
  • 1
  • 1
  • 2
  • It's a bit awkward :) you could have only one stylesheet because you can set the id of the container div and the id of the map's div inside the map_options hash. See here: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Map – apneadiving May 05 '11 at 06:09