Question

我无法弄清楚如何在我的rails应用中显示Google地图的侧边栏。

已经有一段时间了，我无法找到有关该主题的任何消息来源。宝石的v2发生了很大的变化，我没有熟练掌握。

这是我的代码：

视图：

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>
<div id='markers_list'></div>


<script type="text/javascript">

  $(document).ready(function(){
    var raw_markers = <%=raw @hash.to_json %>;
    var gmaps_markers;

    function createSidebarLi(property_json) {
      return ("<li><a>" + property.titre + " - " + property.address + "<\/a></li>");
    };

    function bindLiToMarker($li, marker){
      $li.click(function(){
        marker.panTo(); //to pan to the marker
        google.maps.event.trigger(marker.getServiceObject(), "click"); // to open infowindow
      });
    };

    function createSidebar(){
      for (var i=0;i<raw_markers.length;i++){
        var $li = $( createSidebarLi(raw_markers[i]) );
        $li.appendTo($('#markers_list'));
        bindLiToMarker($li, gmaps_markers[i]);
      }
    };

    handler = Gmaps.build('Google', {markers: { maxRandomDistance: 1} });
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(raw_markers);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      createSidebar();
    });
  });


  google.maps.event.addListener(marker, 'mouseout', function(){
    infowindow.open(marker.get('map'), marker);
    });

</script>

控制器：

 def index
    @properties = Property.all
    @hash = Gmaps4rails.build_markers(@properties) do |property, marker|
      marker.lat property.latitude
      marker.lng property.longitude
      marker.infowindow property.titre
    end
  end

有人能帮助我吗？

Answer 1

你犯了几个错误，变量等等......

我让你工作plunkr here。

如果您需要文档，check here。

要在json中传递其他信息：

@hash = Gmaps4rails.build_markers(@properties) do |property, marker|
  marker.lat property.latitude
  marker.lng property.longitude
  marker.infowindow property.titre
  marker.json({ titre: property.marker, address: property. address})
end

gmaps4rails v2补充工具栏 - 无法弄清楚如何操作

1 个答案: