Googleマップの位置データをRailsフォームに渡しますか？

Question

地図上のマーカーを新しい位置にドラッグすると、マーカーをクリックするとインフォウィンドウに属性の形式（メール、緯度、経度）が表示されます。どのようにこれらの属性（緯度と経度）を新しい位置の情報で自動的に設定するのですか？：電子メールを入力してSubmitをクリックするだけです。これは私のコードです（不完全です）。

google.maps.event.addListener(testMarker, 'dragend', function(evt) { 
     var testContent = '<%= form_for @newlazystreeter, :url => { :action => "create" }, :html => {:class => "nifty_form"} do |f| %>'+ 
      '<%= f.text_field :email %><br>'+ 
      '<%= f.text_field :latitude %><br>'+ 
      '<%= f.text_field :longitude %><br>'+ 
      '<%= f.submit "Submit!" %>'+ 
      '<% end %>'; 
     var infowindow = new google.maps.InfoWindow({ 
      content: testContent 
     }); 
     infowindow.open(map,testMarker); 
    }); 

Answer 1

私はいくつかのケースではレールが倍数株を生成し、HTMLからJavaScriptにその変換は動作しませんので、より良いあなたは離れて、フォームのコードを置くことだと思います。

ので、最初は見えないDIV内にDOMにフォームを追加し、非表示である： 私も容易これらの後者の要素（フォーム、緯度及び経度）

<div style="display:none"> 
    <%= form_for @newlazystreeter, :url => { :action => "create" }, :html => {:class => "nifty_form", :id => "info_window_form"} do |f| %> 
    <%= f.text_field :email %><br> 
    <%= f.text_field :latitude, :id => 'latitude_field' %><br> 
    <%= f.text_field :longitude, :id => 'longitude_field' %><br> 
    <%= f.submit "Submit!" %> 
    <% end %> 
</div> 

を発見するためにいくつかのIDを追加しましたあなたより

は、コンテンツオプションとしてフォーム要素を使用して情報ウィンドウを作成します。私は本当にあなたの質問に答えるところ

var infowindow = new google.maps.InfoWindow({ 
    content: document.getElementById('info_window_form'), 
}); 

そしてここです。 最後に、マーカーに必要な動作を追加する必要があります。 infowindowを開き、緯度と経度のフォーム値を更新します。

google.maps.event.addListener(testMarker, 'dragend', function(evt) { 
    document.getElementById('latitude_field').value = testMarker.position.lat(); 
    document.getElementById('longitude_field').value = testMarker.position.lng(); 
    infowindow.open(map,testMarker); 
}); 

もう1つお勧めします。マーカーをドラッグしている間にこの情報ウィンドウを非表示にします。

google.maps.event.addListener(testMarker, 'dragstart', function(evt) { 
    infowindow.close(); 
}); 

は、すべてのHTML IDが発見されることを確認するDOMContentLoadedによってトリガリスナーにこのjavascriptのコードを追加しますと覚えておいてください。

document.addEventListener('DOMContentLoaded', function() { 
    // add here javascript code to load map and all this stuff above 
}, false); 

これはうまく動作します。