Google지도 API Javascript in Rails보기

Question

내 app/views/people/show.html.erb 안에 자바 스크립트 코드가 있습니다. 그것은 구글지도 API를 v3을 사용합니다. 그러나 이것은 매우 눈에 거슬리는 것입니다. 제가 원했던 것은 js 코드를 coffeescript 안에 넣고 싶습니다. 그리고 위도/경도 값을 전달하여지도에 반영 할 수 있어야합니다.

<% unless @person.addresses.blank? %> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    function initialize() { 

     <% 
     if @person.addresses.first.latitude.blank? && @person.addresses.first.longitude.blank? 
      lat_long = @person.organization.latitude_longitude 
     else 
      address = @person.addresses.first 
      lat_long = [address.latitude, address.longitude] 
     end 

     lat = lat_long[0] 
     long = lat_long[1] 
     %> 

     var myLatlng = new google.maps.LatLng(<%= lat %>, <%= long %>); 
     var mapOptions = { 
     zoom: 17, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas_show'), mapOptions); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: 'Hello World!' 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

    <div id="map_canvas_show"></div> 

<% end %> 

<h1> 
    <%= @person.name %> <small><%= link_to(t('general.edit'), edit_person_path(@person)) %></small> 
</h1> 

<h3> 
    <%= @person.organization_names(current_organization) %> 
</h3> 

<div> 
    <%#= image_tag @person.fb_profile_pic_large %> 
</div> 

<div class="sfield field_group"> 
    <div class="ls"><%= t('.addresses')%></div> 
    <% @person.addresses.each do |address| %> 
    <div class="rs"><%= address.address %></div> 
    <% end %> 
</div> 

<div class="sfield field_group"> 
    <div class="ls"><%= t('.phone_numbers')%></div> 
    <% @person.phone_numbers.each do |phone_number| %> 
    <div class="rs field_group"><%= phone_number.phone_number %></div> 
    <% end %> 
</div> 

<div class="sfield field_group"> 
    <div class="ls"><%= t('.offices')%></div> 
    <% @person.office_names.each do |office_name| %> 
    <div class="rs"><%= office_name %></div> 
    <% end %> 
</div> 

Answer 1

HTML5 data-* attributes을 사용할 수 있습니다. 레일 가이드 ujs section도 참조하십시오.

var map_canvas = $('#map_canvas_show'); 
var lat = map_canvas.data('lat'); 
var lng = map_canvas.data('long'); 
var myLatlng = new google.maps.LatLng(lat, lng); 

: 좌표를 얻기 위해 같은

<div id="map_canvas_show" data-lat="<%= lat %>" 
          data-long="<%= long %>" /> 

그런 다음 jQuery를에 당신이 뭔가를 사용할 수 있습니다