Gmaps4rails如何創建標記列表

Question

我的代碼：
選址模型：

class Location < ActiveRecord::Base 
    attr_accessible :latitude, :longitude, :timestamp, :user_id, :user 
    validates :latitude, :longitude, :timestamp, :user, :presence => true 
    belongs_to :user 

    def gmaps4rails_sidebar 
    "<span>#{user}</span>" 
    end 
end 

控制器：

@locations = [] 
User.all.each do |user| 
    if user.role?('manager') 
     last_location = user.locations.last 
     if last_location   
     location = {} 
     location[:lat] = last_location.latitude 
     location[:lng] = last_location.longitude 
     location[:title] = last_location.timestamp 
     location[:infowindow] = "<b>#{t(:datetime)}:</b> #{last_location.created_at} <br /><b>#{t(:latitude)}:</b> #{last_location.latitude}<br /><b>#{t(:longitude)}:</b> #{last_location.longitude}<br /><b>#{t(:user)}:</b> #{user.username}" 
     @locations << location 
     end 
    end 
end 

查看：

<%= javascript_include_tag 'locations' %> 
<div class="map_container" style='width: 980px; height: 458px;'> 
    <div id="map" style='width: 980px; height: 458px;'></div> 
</div> 
<ul id="markers_list"> </ul> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } }); 
     handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
     markers = handler.addMarkers(<%=raw @locations.to_json %>); 
     handler.bounds.extendWith(markers); 
     handler.fitMapToBounds(); 
     handler.getMap().setZoom(12); 
     }); 
    }); 
</script> 

我想顯示標記列表。我讀了它是如何在老版本的寶石中完成的。但不知道如何在新版本中做到這一點。在新版本中作爲寶石提示您可以將標記列出到單獨的列表中？

Answer 1

我發現例如http://apneadiving.github.io/

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     var locations_json = <%=raw @locations.to_json %> 
     handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } }); 
     handler.buildMap({ provider: {}, internal: {id: 'map'}, list_container: "markers_list"}, function(){ 
     markers = handler.addMarkers(locations_json); 
     handler.bounds.extendWith(markers); 
     handler.fitMapToBounds(); 
     handler.getMap().setZoom(12); 

     _.each(locations_json, function(json, index){ 
      json.marker = markers[index]; 
      }); 

      createSidebar(locations_json); 
     }); 


     function createSidebarLi(json){ 
      return ("<li><a>" + json.name + "</a></li>"); 
     }; 

     function bindLiToMarker($li, marker){ 
      $li.on('click', function(){ 
      handler.getMap().setZoom(14); 
      marker.setMap(handler.getMap()); 
      marker.panTo(); 
      google.maps.event.trigger(marker.getServiceObject(), 'click'); 
      }) 
     }; 

     function createSidebar(json_array){ 
      _.each(locations_json, function(json){ 
      var $li = $(createSidebarLi(json)); 
      $li.appendTo('#markers_list'); 
      bindLiToMarker($li, json.marker); 
      }); 
     }; 
    }); 
</script>