Gmaps4rails: карта не отображается через ajax с подачей данных erb, но отображается при жестком кодировании

Я хотел бы использовать гем gmaps4rails для отображения карты предметов в fancybox. Я внимательно следил за замечаниями на вики относительно вызова ajax, т.е. скрипты должны быть включены вручную в макет приложения, карты должны быть загружены в javascript (см. вики gem).

Но мне так и не удалось полностью сделать так, чтобы карта отображалась в боксе.

С другой стороны, поскольку я жестко кодирую координаты в javascript, он отлично работает, карта отображается в fancybox и появляются маркеры.

Позвольте мне резюмировать.

В моем представлении индекса у меня есть вызов ajax для действия индекса элементов:

<%= link_to "Show Map", items_path(:format => :js, :show_map => true), :remote => true, :class => 'fancybox' %>

В контроллере я заполняю данные карты:

def index
   @items=Item.all

   if params[:show_map]
       @map= @items.to_gmaps4rails
   end 
 end

в файле index.js.erb я поместил

<% if params[:show_map] %>
    var content = "<%= escape_javascript( gmaps({:last_map => false})) %>";
    $.fancybox({
            'content': content,
            'padding' : 20
        }); 
    Gmaps.map = new Gmaps4RailsGoogle();
    Gmaps.load_map = function() {
               Gmaps.map.initialize();
               Gmaps.map.markers = <%=  @map %>; 
               Gmaps.map.create_markers();
               Gmaps.map.adjustMapToBounds();
               Gmaps.map.callback();
               };  
    Gmaps.loadMaps(); 
<% else %>
 // blablabla
<% end %>

Где маркеры предоставляются в объекте карты.

Это не работает, и вместо моей карты я получил в fancybox сам код. Что-то типа:

var content = "\n
\n
<\/div>\n<\/div>\n"; $.fancybox({ 'content': content, 'padding' : 20 }); Gmaps.map = new Gmaps4RailsGoogle(); Gmaps.load_map = function() {Gmaps.map.initialize(); 
//Gmaps.map.markers = [{"lat":50.294,"lng":5.857},{"lat":50.294,"lng":5.857},{"lat":50.548,"lng":4.918},{"lat":50.384,"lng":3.649},{"lat":50.384,"lng":3.649},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.054,"lng":5.195}]; 
Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.496,"lng":5.066},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.162,"lng":5.871},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005}];
 Gmaps.map.create_markers(); Gmaps.map.adjustMapToBounds(); Gmaps.map.callback(); }; Gmaps.loadMaps();

Когда вместо erb <%= @map %> я жестко кодирую маркеры, например:

Gmaps.map.markers = [{"lat":50.294,"lng":5.857},"lat":50.294,"lng":5.857},{"lat":50.548,"lng":4.918}];

Оно работает!

Похоже, я что-то упустил в преобразовании типа данных json. Но я не эксперт, чтобы найти, что идет не так.

Спасибо за вашу помощь!


ruby-on-rails ajax fancybox gmaps4rails
person microcosme    schedule 27.10.2012    source источник
comment
попробуйте использовать jQuery.parseJSON... но убедитесь, что вы конвертируете правильно сформированная строка JSON (в приведенном выше коде отсутствуют некоторые открывающие/закрывающие скобки, а также обязательные двойные кавычки)   -  person JFK    schedule 28.10.2012

Ответы (2)


arrow_upward
0
arrow_downward

Только что успешно попробовал:

<a href="#test" class="fancybox">Open</a>

<div id="test" style="display:none;width:300px;">
  <%= gmaps markers: { data: @json } , last_map: false %>
</div>

<script type="text/javascript">
$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad   : function() { Gmaps.loadMaps(); }
});
</script>
person apneadiving    schedule 28.10.2012

arrow_upward
0
arrow_downward

Хорошо, у меня есть то, что не шло хорошо. Благодаря следующему ответу https://stackoverflow.com/a/12219016/1100674.

Поскольку я использую следующий синтаксис:

Gmaps.map.markers = ‹%= @map %>;

Я получаю json, отображаемый следующим образом:

               Gmaps.map.markers = [{&quot;lat&quot;:50.8483059,&quot;lng&quot;:4.351783999999999},{&quot;lat&quot;:50.11,&quot;lng&quot;:5.003},{&quot;lat&quot;:50.11,&quot;lng&quot;:5.003},{&quot;lat&quot;:50.08,&quot;lng&quot;:4.5760000000000005},{&quot;lat&quot;:50.08,&quot;lng&quot;:4.5760000000000005},{&quot;lat&quot;:50.08,&quot;lng&quot;:4.5760000000000005},{&quot;lat&quot;:50.413,&quot;lng&quot;:4.371}];

В то время как я использую метод raw(),

Gmaps.map.markers = ‹%= raw(@map) %>;

Я получаю правильный формат.

               Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.413,"lng":4.371}];
person microcosme    schedule 31.10.2012