gmaps4rails v2 - customize sidebar -
i use gmaps4rails display markers on map , have sidebar witch allow me select marker , open on map.
the sidebar wirks customize it.
right know do:
<script type="text/javascript"> $(document).ready(function(){ var raw_markers = <%=raw @hash.to_json %>; function createsidebarli(json){ return ("<li>" + json.titre + ' ' + json.address + "</li>"); }; function bindlitomarker($li, marker){ $li.on('click', function(){ handler.getmap().setzoom(14); marker.setmap(handler.getmap()); //because clusterer removes map property marker marker.panto(); google.maps.event.trigger(marker.getserviceobject(), 'click'); }); }; function createsidebar(json_array){ _.each(json_array, function(json){ var $li = $( createsidebarli(json) ); $li.appendto('#markers_list'); bindlitomarker($li, json.marker); }); }; handler = gmaps.build('google', { builders: { marker: infoboxbuilder} }); handler.buildmap({ internal: {id: 'map'}}, function(){ var markers = handler.addmarkers(raw_markers); _.each(raw_markers, function(json, index){ var marker = markers[index]; json.marker = marker; google.maps.event.addlistener(handler.getmap(), "click", function(){ infowindow.close(); }); google.maps.event.addlistener(marker.getserviceobject(), 'mouseover', function(){ google.maps.event.trigger(marker.getserviceobject(), 'click'); }); }); createsidebar(raw_markers); handler.bounds.extendwith(markers); handler.fitmaptobounds(); }); }); </script>
i'd create partial , display instead of just:
return ("<li>" + json.titre + ' ' + json.address + "</li>");
in partial, i'd same custom infowindow.
in controller, use:
marker.infowindow render_to_string(:partial => "/properties/infowindow", :locals => { :property => property})
is there way sidebar ? used "marker.sidebar render_to_string" gmaps4rails v1 doesn't work anymore.
its javascript.
first, provide data in controller, generate json (i assume use builtin json generator):
marker.json({ sidebar: render_to_string(:partial => "/properties/infowindow", :locals => { :property => property}) })
then display it:
function createsidebarli(json){ return json.sidebar; };
Comments
Post a Comment