ruby on rails - gmap4rails load and add infobox only when marker clicked -


i'm using gmap4rails v2 rails 4.1 , instead of loading of infoboxes @ once, inefficient, load contents info box of particular marker once marker clicked. came following select marker.

markers = handler.addmarkers(<%= raw(@hash.to_json) %>);         _.each(markers, function(marker){           google.maps.event.addlistener(handler.getmap(), 'click', function(){             marker.infowindow();           });         });  

but i'm not sure how can send query user table needed attributes example user.name, user.photo used in infobox.

the full gmaps handler here:

var handler = gmaps.build('google', { markers: { maxrandomdistance: null, clusterer: undefined } }),     maxzoom = 14;     handler.buildmap({       provider: {       maptypecontrol: false,       maptypeid: google.maps.maptypeid.roadmap,       streetviewcontrol: false,       doclustering: false,       minzoom: 5       },     internal: {id: 'big_map'}},      function(){      markers = handler.addmarkers(<%= raw(@hash.to_json) %>);     _.each(markers, function(marker){       google.maps.event.addlistener(handler.getmap(), 'click', function(){         marker.infowindow();       });     });     handler.map.centeron([$("#big_map").data("lat"),$("#big_map").data("lng")]);     handler.getmap().setzoom(15);     //handler.bounds.extendwith(markers);     //handler.fitmaptobounds();   }); 

controller loads marker info:

return gmaps4rails.build_markers(profiles) |profile, marker|   marker.lat profile.latitude   marker.lng profile.longitude   marker.json({ :id => profile.profile_code })   # how loaded markers before: marker.infowindow render_to_string(partial: "info_window", locals: { profile: profile })   marker.picture({     url: view_context.image_path( "marker-#{ (profile == current_user.profile) ? 'green' : 'blue' }.png"),     width:  32,     height: 32   }) end 

is there way send partial infowindow() function did in original markers load seen below? , if how send user.id partial (in case it's profile.profile_code set each marker.id equal think.

update:

ok realize need make request server, javascript can't i'm going try use ajax using

markers = handler.addmarkers(<%= raw(@hash.to_json) %>); _.each(markers, function(marker){   google.maps.event.addlistener(handler.getmap(), 'click', function(){     var infowindow = marker.infowindow;     $.post('<%= load_info_box_url %>', {     }, function(data){       infowindow.html(data).name %>)       infowindow.open(gmaps.map.map, marker);     });   }); }); 

followed making load_info_box route , requesting necessary data in controller, sending html data!

check plunkr

basically:

  • i create custom builder

  • leverage underscore js templating.

so json must contain necessary keys infowindow html built on demand


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -