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!
basically:
i create custom builder
leverage underscore js templating.
so json must contain necessary keys infowindow html built on demand
Comments
Post a Comment