Gmaps4rails how create markers list

Question

My code:
Location model:

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

Controller:

@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

View:

<%= 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>

I want to display a list of markers. I read how it was done in the old version gem. But do not know how to do it in the new version. Prompt as gem in the new version you can list markers to a separate list?

Answer 1

I find example 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>