【问题标题】:Rails: Customizing an infowindow using gmaps4railsRails:使用 gmaps4rails 自定义信息窗口
【发布时间】:2017-03-06 20:10:47
【问题描述】:

我一直在关注 github 上的 gmaps4rails 教程,但不了解如何自定义信息窗口。我有一个收集实习数据的数据库,包括地点、姓名、公司和描述。标记出现在地图上的正确位置,但是我只能在需要显示所有标记时让信息窗口显示名称或描述或公司。

我是 Rails 新手,并不完全了解我需要更新什么以允许所有这些属性出现在信息窗口中。我在下面附上我的代码:

实习模式:

class Internship < ApplicationRecord
    geocoded_by :address
    after_validation :geocode
end

实习观:

<script src="//maps.google.com/maps/api/js?key=AIzaSyBj4qLUeW291Z5WvVOwzseQONRBGCnA8ds"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
<div style='width: 800px;'>
   <div id="map" style='width: 1100px; height: 600px'></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();
});
</script>

实习主管:

def index
  @internships = Internship.all
  @hash = Gmaps4rails.build_markers(@internships) do |internship, marker|
  marker.lat internship.latitude
  marker.lng internship.longitude
  marker.infowindow internship.description
  end
end

非常感谢我能得到的任何帮助!

【问题讨论】:

    标签: ruby-on-rails google-maps customization infowindow gmaps4rails


    【解决方案1】:

    我需要向控制器中添加一个数组来保存数据库中的所有值,然后将该数组传递到信息窗口:

      def index
        @internships = Internship.all
    
        @internship_properties = Array.new
        @internships.each do |internship|
        @internship_properties.push(internship)
      end
    
    
     @hash = Gmaps4rails.build_markers(@internship_properties) do |internship_prop, marker|
      concat_info_window = "#{internship_prop.name}, #{internship_prop.address}, #{internship_prop.company}, #{internship_prop.title}, #{internship_prop.date}, #{internship_prop.description}"
      marker.lat internship_prop.latitude
      marker.lng internship_prop.longitude
      marker.infowindow concat_info_window
    
     end
    end
    

    【讨论】:

      最近更新 更多