Gmaps4rails how create markers list - ruby-on-rails

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>