Gmaps4rails :지도가 erb 데이터 피드가있는 ajax를 통해 표시되지 않지만 하드 코딩 된 경우 수행됩니다.

Question

gmaps4rails gem을 사용하여 fancybox에 항목의지도를 표시하고 싶습니다. 위키에서 Ajax 호출과 관련하여주의 깊게 설명 했으므로 스크립트는 애플리케이션 레이아웃에 수동으로 포함되어야하며지도는 자바 스크립트 (see gem wiki)에로드해야합니다.

그러나 상자에지도를 표시하는 데 여전히 완전히 성공하지 못했습니다.

다른 한편으로는 하드 코딩 된 코드가 자바 스크립트에서 잘 작동하기 때문에지도가 fancybox에 표시되고 마커가 나타납니다.

요약하면 다음과 같습니다. 하는 index.js에서

def index 
    @items=Item.all 

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

: 나는지도 데이터를 채울 컨트롤러에서

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

: 내 인덱스보기에서

, 나는 항목의 index 액션에 아약스 전화를합니다. 파일을 넣으면

<% 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 데이터 형식 변환에서 뭔가 빠져있는 것처럼 보입니다. 그러나 나는 잘못되고있는 것을 찾기 위해 전문가는 아니다.

도움 주셔서 감사합니다.

Answer 1

좋아, 나는 잘 진행되지 않은 것을 가지고있다. 다음 답변 덕분에 https://stackoverflow.com/a/12219016/1100674.

I는 다음과 같은 구문을 사용 같이

Gmaps.map.markers = <퍼센트 = @map %>;

이 I로 렌더링 JSON 얻을 :

   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}]; 

I는 raw() 방법을 사용하는 반면,

Gmaps.map.markers = <퍼센트 = 원료 (@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}]; 

Answer 2

은 그냥 성공적으로 시도 :

<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>