Problems with marker.infowindow as JS request

[ngelx]

Hi, i'm having an issue with marker.infowindow and JS request.

Controller:

def general
   @positions =  Position.where("latitude is NOT NULL AND longitude is NOT NULL").first(5)
   @hash = Gmaps4rails.build_markers(@positions) do |position, marker|

    marker.picture({
              :url      => ActionController::Base.helpers.asset_path( "p.png", type: :image),
              :width    => 12,
              :height   => 12
             })
    marker.title position.address
    marker.lat position.latitude
    marker.lng position.longitude
    marker.infowindow render_to_string(:partial => "/maps/position_detail", :formats => [:html], :locals => { :position => position})
  end
end

general.js.erb

$('#main-content').fadeOut(function() {
  var $main = $(this);
  var tpl   = "<%= j(render(:partial => 'maps/maps_fs',  :formats => [:html])) %>";

  $main.html(tpl).fadeIn(function(){

    var handler = Gmaps.build('Google', {markers:
            {clusterer: {
              gridSize: 100,
              maxZoom: 12
            }}});

    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(<%= raw @hash.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });
  });

  history.pushState({url: '/maps/monit'}, null, '/maps/monit');
});

_maps_fs_html.erb

<div id="map" class="maps-google-fs"></div>

<script>
  $('#map').height($(window).height() - $('#footer').height() - $('.navbar.main').height() - $('#menu-top').height());

</script>

_position_detail.html.erb

<div>
  <%= position.address %>
</div>

The thing is that when I make an AJAX request it simple do not work (no any error message at all ...)

Started GET "/maps/general" for 127.0.0.1 at 2014-05-23 00:58:00 +0000
Processing by MapsController#general as JS
  User Load (2.2ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 25 LIMIT 1
  Position Load (1.4ms)  SELECT `positions`.* FROM `positions` WHERE (latitude is NOT NULL AND longitude is NOT NULL) LIMIT 5
  Rendered maps/_position_detail.html.erb (0.2ms)
  Rendered maps/_position_detail.html.erb (0.2ms)
  Rendered maps/_position_detail.html.erb (0.2ms)
  Rendered maps/_position_detail.html.erb (0.2ms)
  Rendered maps/_position_detail.html.erb (0.2ms)
  Rendered maps/_maps_fs.html.erb (0.1ms)
  Rendered maps/general.js.erb (21.5ms)
Completed 200 OK in 425.4ms (Views: 303.8ms | ActiveRecord: 3.6ms)

but, if i comment the line of marker.infowindow, all works as expected.

Started GET "/maps/general" for 127.0.0.1 at 2014-05-23 01:14:35 +0000
Processing by MapsController#general as JS
  User Load (1.6ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 25 LIMIT 1
  Position Load (1.2ms)  SELECT `positions`.* FROM `positions` WHERE (latitude is NOT NULL AND longitude is NOT NULL) LIMIT 5
  Rendered maps/_maps_fs.html.erb (0.2ms)
  Rendered maps/general.js.erb (22.3ms)
Completed 200 OK in 427.7ms (Views: 280.1ms | ActiveRecord: 12.6ms)

Any help would be appreciated.

Thanks. Angel

[apneadiving]

I'd need some other details, could you provide the full response sent by your server?

[ngelx]

Hi @apneadiving thanks for your quick response and support for this awesome gem.

The response is:

$('#main-content').fadeOut(function() {
  var $main = $(this);
  var tpl   = "<div id=\"map\" class=\"maps-google-fs\"><\/div>\n\n<script>\n  $(\'#map\').height($(window).height() - $(\'#footer\').height() - $(\'.navbar.main\').height() - $(\'#menu-top\').height());\n\n<\/script>";

  $main.html(tpl).fadeIn(function(){

    var handler = Gmaps.build('Google', {markers:
            {clusterer: {
              gridSize: 100,
              maxZoom: 12
            }}});

    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers([{"picture":{"url":"/assets/3.png","width":12,"height":12},"marker_title":"cordoba 1200","lat":"-34.6624876","lng":"-58.6048213","infowindow":"<div>  cordoba 1200</div>"},{"picture":{"url":"/assets/1.png","width":12,"height":12},"marker_title":"Ayala Gauna 7850","lat":"-32.9124234","lng":"-60.7318057","infowindow":"<div>  Ayala Gauna 7850</div>"}]);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });

  });

  history.pushState({url: '/maps/general'}, null, '/maps/general');
});

in contrast of the template generate by <% j render ... %> seems that infowindows has not the "/" character escaped, not sure if that is right.

[apneadiving]

I dont understand, are you sure the code is executed?

the js works fine: http://plnkr.co/edit/ox4AaEklUDyURA18X67t?p=preview

[ngelx]

I'm sure that the code is not execute when i add the marker.infowindows param, but not sure why, or how to debug it.

[apneadiving]

add a debugger in your file statement and open your js console

[ngelx]

Not sure what was going on, but adding to the end of the controller's action these lines seems to fix it.

  respond_to do |format|
    format.js
    format.html
  end

Thanks for your help. Angel

[kashifnaseer]

+1 , having same issue and got it fixed with respond_to block. thanks guys