Gmaps4rails : 设置地图的宽度和高度答案

【问题标题】：Gmaps4rails : Setting map width and heightGmaps4rails : 设置地图的宽度和高度
【发布时间】：2011-03-14 10:55:26
【问题描述】：

阅读 gmaps4rails gem 文档，我没有找到任何设置地图宽度和高度的方法。有没有办法做到这一点？

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-3 google-maps gmaps4rails

【解决方案1】：

我应该对此提供更多详细信息。

我将创建一个安装 rake 任务以在 Rails 应用程序中复制 css 和 javascript。

好吧，现在，只需在您的 css 中覆盖这个（我假设您没有更改地图 ID）。

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

如果您希望它工作，请注意在 yield(:head) 之后包含您的 css

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

【讨论】：

感谢您的精彩宝石。只是一个快速的澄清。在您的回答中，您将 gmaps4rails_map 列为 id，它不是一个类吗？
@Seanland：如果我没记错的话，我在引入多张地图时改变了这一点:)
当我需要显示不同尺寸的地图时，最佳做法是什么？即，不是多张地图，而是不同页面的设计需要不同大小的地图。
@alieken：你可以改变地图的类别，所以这样做是迄今为止最干净的
好的，谢谢，听起来确实很合理。我只是要补充一点，:map_options 中的 :container_class 和 :class 都应该设置，因为这两个 CSS 类都需要更新它们的宽度。

【解决方案2】：

@apenadving 的答案对我不起作用，假设地图 div 类和 id 没有改变，我需要执行以下 （在 scss 中） 才能得到东西工作正常，也许我错过了什么......

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

此外，对于 rails 3.1 及更高版本，您只需在 application.css.scss 文件中执行以下操作

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

【讨论】：

【解决方案3】：

如果您想轻松做到这一点，我建议您按照以下步骤操作：

使用以下方法添加自定义容器类：

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

然后添加你的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;
}

【讨论】：