Рендеринг Gmap через вызов AJAX с помощью Gmaps4rails

Причина довольно проста: партиал содержит много javascript, который вы не можете загрузить и выполнить таким образом.

Таким образом, вы не можете использовать RJS там.

Правильный способ сделать это - UJS: получить данные с помощью вызова AJAX и отобразить результат. В следующем коде я использую jQuery.

На ваш взгляд добавьте:

//include google script
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=geometry'></script>
//include gmaps4rails javascript
<%=javascript_include_tag 'gmaps4rails' %>

<script type="text/javascript" charset="utf-8">
//load map when button click (replace with what you want)
$('#ajax_map').click(function(){
  //you have to set a size to the div otherwise the map won't display, that's the purpose of these css classes
  $('#map_container').addClass('map_container');
  $('#gmaps4rails_map').addClass('gmaps4rails_map');
  //create the map object
  Gmaps4Rails.initialize();
  //of course, replace these two with your dynamic data, you'd have to use some $.ajax jQuery method.
  Gmaps4Rails.direction_conf.origin = 'toulon, france';
  Gmaps4Rails.direction_conf.destination = 'paris, france';
  //read the js file, you can customize much more: https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/public/javascripts/gmaps4rails.js
  Gmaps4Rails.create_direction();
});
</script>

<div id="map_container"> 
  <div id="gmaps4rails_map"></div>
</div>

<button type="button" id="ajax_map">Ajax Map</button>

Добавьте следующий класс в свой CSS:

#map-container {
  width: 800px;
}

#gmaps4rails_map {
  width: 800px;
  height: 400px;
}