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>